<!DOCTYPE html>
<html lang="en">

<head>
    <title>Datta Able | Admin template</title>
    <!-- HTML5 Shim and Respond.js IE10 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 10]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content="Datta Able Bootstrap admin template made using Bootstrap 4 and it has huge amount of ready made feature, UI components, pages which completely fulfills any dashboard needs." />
    <meta name="keywords" content="Admin templates, Bootstrap Admin templates, Angular6, Bootstrap 4, Dashboard, Dashboard Templets, sass admin templets, html admin templates, Responsive, Bootstrap Admin templates free download, Angular6 Admin templates free download,premium Bootstrap Admin templates,premium Angular6 Admin templates download">
    <meta name="author" content="Codedthemes" />

    <!-- Favicon icon -->
    <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
    <!-- fontawesome icon -->
    <link rel="stylesheet" href="assets/fonts/fontawesome/css/fontawesome-all.min.css">

    <!-- ======================= -->
    <!-- ======= PLUGIN CSS ===== -->
    <!-- ======================= -->

    <!-- animation css -->
    <link rel="stylesheet" href="assets/plugins/animation/css/animate.min.css">
    <!-- prism css -->
    <link rel="stylesheet" href="assets/plugins/prism/css/prism.min.css">
    <!-- Owl slider css -->
    <link rel="stylesheet" type="text/css" href="assets/plugins/owl-carousel/css/owl.carousel.min.css">
    <!-- vendor css -->
    <link rel="stylesheet" href="assets/css/style.css">

    <style>pre[class*=language-]:after, pre[class*=language-]:before{
            display: none;
        }
        .docs-page-header {
        	font-weight: 400;
        	font-size: 27px;
        	margin: 0;
        	padding: 15px 50px;
        	line-height:40px;
        	height: 70px;
        }
        .docs-page-header.bg-dark {
            background-color: rgb(63, 77, 103) !important;
        }

        .docs-header-path {
        	opacity: 1;
        }
        .docs-wrapper {
        	min-height: calc(100vh - 70px);
        	position: relative;
        }

        .docs-inner {
        	padding: 40px;
        }

        .docs-sections {
        	position: fixed;
        	top: 70px;
        	left: 0;
        	bottom: 0;
        	overflow: hidden;
        }

        .docs-sections-inner {
        	padding-top: 32px;
        	padding-left: 32px;
        	padding-right:32px;
        	margin: 0;
        }

        .docs-sections-inner>li:first-child {
        	padding-top: 0 !important;
        }

        .docs-sections-inner li {
        	list-style: none;
        	padding: 5px 0;
        	margin: 0;
        	font-size:14px;
        }

        .docs-sections,
        .docs-sections a,
        .docs-sections a:focus,
        .docs-sections a:active {
        	color: #6c757d;
        	line-height: 1.3;
            padding: 0;
        }

        .docs-sections a:hover {
        	color: #333;
            position:relative;
        }

        .docs-sections a.active {
        	color: #333;
        	font-weight: bold;
            position:relative;
        }
        .docs-sections a.active:before , .docs-sections a:hover:before {
            content: "";
            position: absolute;
            width: 5px;
            height: 5px;
            background: #000;
            border-radius: 50%;
            top: 8px;
            left: -15px;
        }

        .docs-page-header,
        .docs-wrapper {
        	min-width: 1200px;
        }

        .docs-sections {
        	width: 230px;
            background: rgba(63, 77, 103, 0.05);
        }

        .docs-wrapper {
        	padding-left: 230px;
        }

        h2.docs-header {
        	margin-bottom:32px;
        	font-size: 24px;
        	position: relative;
        }

        h2.docs-header~h2.docs-header {
        	margin-top: 50px;
        }
    </style>

    <!--  <link rel="stylesheet" class="rtl-css" href="assets/css/layouts/rtl.css"> -->

    <!-- ======================= -->
    <!-- ======= PLUGIN JS ===== -->
    <!-- ======================= -->

    <script src="assets/js/vendor-all.min.js"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!-- highlight.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
    <script src="assets/plugins/clipboard/js/clipboard.js"></script>
    <!-- prism Js -->
    <script src="assets/plugins/prism/js/prism.min.js"></script>
    <!-- owl carousel 2 js -->
    <script type="text/javascript" src="assets/plugins/owl-carousel/js/owl.carousel.min.js"></script>
    <!-- amchart js -->
    <script src="assets/plugins/amchart/js/amcharts.js"></script>
    <script src="assets/plugins/amchart/js/gauge.js"></script>
    <script src="assets/plugins/amchart/js/serial.js"></script>
    <script src="assets/plugins/amchart/js/light.js"></script>
    <script src="assets/plugins/amchart/js/pie.min.js"></script>
    <script src="assets/plugins/amchart/js/ammap.min.js"></script>
    <script src="assets/plugins/amchart/js/usaLow.js"></script>
    <script src="assets/plugins/amchart/js/radar.js"></script>
    <script src="assets/plugins/amchart/js/worldLow.js"></script>
    <!-- WaterBall js -->
    <script src="assets/plugins/waterball/js/createWaterBall-jquery.js"></script>
    <!-- Float Chart js -->
    <script src="assets/plugins/flot/js/jquery.flot.js"></script>
    <script src="assets/plugins/flot/js/jquery.flot.categories.js"></script>
    <script src="assets/plugins/flot/js/curvedLines.js"></script>
    <script src="assets/plugins/flot/js/jquery.flot.tooltip.min.js"></script>

</head>

<body>
    <h2 class="docs-page-header bg-dark text-white">
        <span class="docs-header-path">widget</span>
    </h2>
    <div class="docs-wrapper">
        <div class="docs-sections">
            <ul class="docs-sections-inner">
                <li class="nav-item"><a class="nav-link active" href="#page-statistic">Statistic</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-data">Data</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-table">Table</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-user">User</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-amchart">Am chart</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-floatchart">Float chart</a></li>
            </ul>
        </div>
        <div class="docs-inner">
            <h2 class="docs-header" id="page-statistic">Statistic</h2>
            <div class="row">
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Daily Sales</h5>
                        </div>
                        <div class="card-block">
                            <div class="row d-flex align-items-center">
                                <div class="col-9">
                                    <h3 class="f-w-300 d-flex align-items-center m-b-0"><i class="feather icon-arrow-up text-c-green f-30 m-r-5"></i>$ 249.95</h3>
                                </div>
                                <div class="col-3 text-right">
                                    <p class="m-b-0">67%</p>
                                </div>
                            </div>
                            <div class="progress m-t-30" style="height: 7px;">
                                <div class="progress-bar progress-c-theme" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Monthly Sales</h5>
                        </div>
                        <div class="card-block">
                            <div class="row d-flex align-items-center">
                                <div class="col-9">
                                    <h3 class="f-w-300 d-flex align-items-center  m-b-0"><i class="feather icon-arrow-down text-c-red f-30 m-r-5"></i>$ 2.942.32</h3>
                                </div>
                                <div class="col-3 text-right">
                                    <p class="m-b-0">36%</p>
                                </div>
                            </div>
                            <div class="progress m-t-30" style="height: 7px;">
                                <div class="progress-bar progress-c-theme2" role="progressbar" style="width: 35%;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Sales</h5>
                        </div>
                        <div class="card-block">
                            <h3 class="f-w-300">$17,400</h3>
                            <span class="d-block  text-muted text-uppercase">Total Revenue</span>
                            <div class="row">
                                <div class="col-6 m-t-20">
                                    <h6 class="text-muted">472</h6>
                                    <h6 class=" text-muted f-w-300 m-b-0">Deals Added<span class="float-right f-w-400">69%</span></h6>
                                    <div class="progress m-t-10" style="height: 7px;">
                                        <div class="progress-bar progress-c-theme" role="progressbar" style="width: 69%;" aria-valuenow="69" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="col-6 m-t-20">
                                    <h6 class="text-muted">89</h6>
                                    <h6 class=" text-muted f-w-300 m-b-0">Deals Won<span class="float-right f-w-400">58%</span></h6>
                                    <div class="progress m-t-10" style="height: 7px;">
                                        <div class="progress-bar progress-c-theme2" role="progressbar" style="width: 58%;" aria-valuenow="58" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card filter-bar">
                        <div class="card-header">
                            <h5>Filter</h5>
                            <span class="d-block m-t-5">Distance Filter</span>
                        </div>
                        <div class="card-block">
                            <h3 class="f-w-300">4 - 25 Miles</h3>
                            <div class="row m-t-30">
                                <div class="col-6 p-r-0">
                                    <a href="#!" class="btn btn-primary text-uppercase btn-block">add friend</a>
                                </div>
                                <div class="col-6">
                                    <a href="#!" class="btn text-uppercase border btn-block btn-outline-secondary">message</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-block border-bottom">
                            <div class="row d-flex align-items-center">
                                <div class="col-auto">
                                    <i class="feather icon-zap f-30 text-c-green"></i>
                                </div>
                                <div class="col">
                                    <h3 class="f-w-300">235</h3>
                                    <span class="d-block text-uppercase">total ideas</span>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div class="row d-flex align-items-center">
                                <div class="col-auto">
                                    <i class="feather icon-map-pin f-30 text-c-blue"></i>
                                </div>
                                <div class="col">
                                    <h3 class="f-w-300">26</h3>
                                    <span class="d-block text-uppercase">total locations</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-block border-bottom">
                            <div class="row d-flex align-items-center">
                                <div class="col-auto">
                                    <i class="feather icon-sun f-40 text-c-green"></i>
                                </div>
                                <div class="col">
                                    <h2 class="f-w-300">26°<span class="m-r-3 f-14 text-muted">Sunny</span></h2>
                                    <span class="d-block text-muted">Monday 12:00 PM</span>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div class="row d-flex align-items-center">
                                <div class="col-sm-12 pt-2 pb-1">
                                    <span class="">Wind</span>
                                    <span class="float-right text-muted">ESE 14 mph</span>
                                </div>
                                <div class="col-sm-12 pt-2 pb-1">
                                    <span class="">Humidity</span>
                                    <span class="float-right text-muted">78%</span>
                                </div>
                                <div class="col-sm-12 pt-2">
                                    <span class="">Pressure</span>
                                    <span class="float-right text-muted">27.64 in</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-xl-4 datta-example">
                    <div class="card theme-bg2">
                        <div class="card-block">
                            <div class="row d-flex align-items-center">
                                <div class="col-auto">
                                    <i class="feather icon-sun f-40 text-white"></i>
                                </div>
                                <div class="col">
                                    <h2 class="f-w-300 text-white">26°<span class=" m-r-3 f-14 text-white">Sunny</span></h2>
                                    <span class="d-block text-white">Monday 12:00 PM</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card table-card">
                        <div class="row-table">
                            <div class="col-auto theme-bg text-white p-t-50 p-b-50">
                                <i class="feather icon-package f-30"></i>
                            </div>
                            <div class="col text-center">
                                <span class="text-uppercase d-block m-b-10">New Products</span>
                                <h3 class="f-w-300">235</h3>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card rides-bar">
                        <div class="card-block">
                            <div class="row d-flex align-items-center">
                                <div class="col-auto">
                                    <i class="feather icon-shopping-cart f-30 text-white rides-icon"></i>
                                </div>
                                <div class="col">
                                    <h3 class="f-w-300">383 Rides</h3>
                                    <span class="d-block">Last week 295 <strong class="text-c-green f-w-300">(+88)</strong></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-xl-4 datta-example">
                    <div class="card theme-bg visitor">
                        <div class="card-block text-center">
                            <img class="img-female" src="assets/images/user/user-1.png" alt="visitor-user">
                            <h5 class="text-white m-0">TOTAL VISITORS</h5>
                            <h3 class="text-white m-t-10 f-w-300">235</h3>
                            <span class="text-white">20% More than last Month</span>
                            <img class="img-men" src="assets/images/user/user-2.png" alt="visitor-user">
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card impression">
                        <div class="card-block">
                            <div class="row d-flex align-items-center">
                                <div class="col-auto">
                                    <i class="feather icon-map-pin f-30 text-c-blue"></i>
                                </div>
                                <div class="col text-right">
                                    <h3 class="f-w-300">235</h3>
                                    <h5 class="d-block text-uppercase text-muted">Impression</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card theme-bg">
                        <div class="card-block">
                            <div class="row">
                                <div class="col text-center">
                                    <h3 class="text-white f-w-300 m-b-10">598</h3>
                                    <span class="text-white text-uppercase">Pending Users</span>
                                </div>
                                <div class="col text-right">
                                    <span class="text-white d-block  p-1">Last Month</span>
                                    <span class="text-white d-block  p-1">204</span>
                                    <span class="text-white d-flex align-items-center justify-content-end  p-1"><i class="fas fa-caret-up text-white f-26 m-r-10"></i> 56.68%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-block">
                            <div class="row">
                                <div class="col">
                                    <i class="feather icon-shopping-cart f-30 text-c-green"></i>
                                    <h6 class="m-t-50 m-b-0">Last week’s orders</h6>
                                </div>
                                <div class="col text-right">
                                    <h3 class="text-c-green f-w-300">589</h3>
                                    <span class="text-muted d-block">New Order</span>
                                    <span class="badge theme-bg text-white m-t-20">1434</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card theme-bg">
                        <div class="card-block">
                            <h4 class="text-white text-uppercase text-center">Savings Account</h4>
                            <div class="row m-t-10 p-t-20">
                                <div class="col text-center">
                                    <h4 class="text-white f-w-300">$2,456.78</h4>
                                    <p class="text-white d-block">Balance</p>
                                </div>

                                <div class="col text-center">
                                    <h4 class="text-white f-w-300">$867.00</h4>
                                    <p class="text-white d-block">Expenses</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card profit-bar">
                        <div class="card-block">
                            <div class="row">
                                <div class="col">
                                    <h5 class="f-w-300">Total Profit</h5>
                                    <h3 class="text-c-green f-w-400 m-t-10">$1,783</h3>
                                </div>
                                <div class="col">
                                    <i class="fas fa-money-bill-alt f-20 text-white float-right"></i>
                                </div>
                            </div>
                            <h6 class="m-t-20 text-muted"><span class="badge theme-bg text-white m-r-10">+11%</span>From Previous Month</h6>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-xl-4 datta-example">
                    <div class="card theme-bg2 assets-value">
                        <div class="bg-img"></div>
                        <div class="card-block  text-center">
                            <i class="fas fa-chart-line text-white f-30 m-b-20"></i>
                            <h5 class="text-white m-b-12">Total Growth</h5>
                            <h3 class="text-white f-w-300">2,80,500</h3>
                            <span class="text-white">80% More than last Month</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card theme-bg">
                        <div class="card-header borderless">
                            <h5 class="text-white">Timer</h5>
                        </div>
                        <div class="card-block text-center">
                            <h2 class="f-w-300 m-b-30 text-white">00:24:38</h2>
                            <i class="feather icon-play f-50 text-white d-block m-b-25"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card theme-bg assets-value">
                        <div class="bg-img"></div>
                        <div class="card-block text-center">
                            <i class="fas fa-users f-50 text-white m-b-20"></i>
                            <h5 class="text-white m-b-15">Total Assets</h5>
                            <h3 class="text-white f-w-300">3,85,600</h3>
                            <span class="text-white">60% More than last Month</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-block border-bottom">
                            <h5 class="m-0">Overdue Tasks</h5>
                        </div>
                        <div class="card-block">
                            <div class="row align-items-center">
                                <div class="col-8">
                                    <h2 class="f-w-300 m-0">34</h2>
                                    <span class="text-muted">Last Week 60%</span>
                                </div>
                                <div class="col-4 text-right">
                                    <h5 class="text-c-red f-w-400">10%</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-block border-bottom">
                            <h5 class="m-0">Tasks to Do</h5>
                        </div>
                        <div class="card-block">
                            <div class="row align-items-center">
                                <div class="col-8">
                                    <h2 class="f-w-300 m-0">25</h2>
                                    <span class="text-muted">Last Week 40%</span>
                                </div>
                                <div class="col-4 text-right">
                                    <h5 class="text-c-green f-w-400">30%</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-block border-bottom">
                            <h5 class="m-0">Completed Task</h5>
                        </div>
                        <div class="card-block">
                            <div class="row align-items-center">
                                <div class="col-8">
                                    <h2 class="f-w-300 m-0">19</h2>
                                    <span class="text-muted">Last Week 60%</span>
                                </div>
                                <div class="col-4 text-right">
                                    <h5 class="text-c-red f-w-400">25%</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-xl-4 datta-example">
                    <div class="card user-card">
                        <div class="card-block">
                            <h5 class="m-b-15">Register User</h5>
                            <h4 class="f-w-300">1205</h4>
                            <span class="text-muted"><label class="label theme-bg text-white f-12 f-w-400">20%</label>Monthly Increase</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card user-card">
                        <div class="card-block">
                            <h5 class="f-w-400 m-b-15">Daily User</h5>
                            <h4 class="f-w-300">467</h4>
                            <span class="text-muted"><label class="label theme-bg text-white f-12 f-w-400">10%</label>Weekly Increase</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card user-card">
                        <div class="card-block">
                            <h5 class="f-w-400 m-b-15">Premium User</h5>
                            <h4 class="f-w-300">346</h4>
                            <span class="text-muted"><label class="label theme-bg text-white f-12 f-w-400">50%</label>Yearly Increase</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Project Rating</h5>
                        </div>
                        <div class="card-block">
                            <div class="row align-items-center justify-content-center">
                                <div class="col-6">
                                    <h2 class="f-w-300 d-flex align-items-center float-left">4.3 <i class="fas fa-star f-12 m-l-10 text-c-yellow"></i></h2>
                                </div>
                                <div class="col-6">
                                    <h6 class="f-w-300 d-flex  align-items-center float-right">0.4 <i class="fas fa-caret-up text-c-green f-24 m-l-10"></i></h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-block">
                            <h5>Your Total Charges</h5>
                            <div class="row align-items-center justify-content-center">
                                <div class="col-6">
                                    <h3 class="f-w-300 m-t-20">$894.39</h3>
                                    <span>August 31,2017</span>
                                </div>
                                <div class="col-6">
                                    <a href="#!" class="btn btn-primary shadow-2 text-uppercase btn-block">Pay now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-block">
                            <h5>Growth Rate</h5>
                            <div class="row align-items-center justify-content-center">
                                <div class="col-6">
                                    <h2 class="f-w-300 m-t-20">48%</h2>
                                </div>
                                <div class="col-6 text-right">
                                    <i class="fas fa-chart-pie f-30 text-c-green"></i>
                                </div>
                            </div>
                            <span class="text-muted text-center d-block">From Last Month</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-block">
                            <h5 class="text-center">Total Leads</h5>
                            <div class="row align-items-center justify-content-center">
                                <div class="col-auto">
                                    <h3 class="f-w-300 m-t-20">$59,48<i class="fas fa-caret-up text-c-green f-26 m-l-10"></i></h3>
                                    <span>EARNINGS</span>
                                </div>
                                <div class="col text-right">
                                    <i class="fas fa-chart-pie f-30 text-c-purple"></i>
                                </div>
                            </div>
                            <div class="leads-progress mt-3">
                                <h6 class="mb-3 text-center">Organic <span class="ml-4">Purchesed</span></h6>
                                <div class="progress">
                                    <div class="progress-bar progress-c-theme2" role="progressbar" style="width: 30%; height:10px;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                                    <div class="progress-bar progress-c-theme" role="progressbar" style="width: 35%; height:10px;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <h6 class="text-muted f-w-300 mt-4">Organic Leads <span class="float-right">340</span></h6>
                                <h6 class="text-muted f-w-300 mt-4">Purchesed Leads <span class="float-right">150</span></h6>
                                <h6 class="text-muted f-w-300 mt-4">Blocked Leads <span class="float-right">120</span></h6>
                                <h6 class="text-muted f-w-300 mt-4">Buy Leads <span class="float-right">245</span></h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card Active-visitor">
                        <div class="card-block text-center">
                            <h5 class="mb-4">Active Visitor</h5>
                            <i class="fas fa-user-friends f-30 text-c-green"></i>
                            <h2 class="f-w-300 mt-3">1,285</h2>
                            <span class="text-muted">Active Visit On Sites</span>
                            <div class="progress mt-4 m-b-40">
                                <div class="progress-bar progress-c-theme" role="progressbar" style="width: 75%; height:7px;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="row card-active">
                                <div class="col-md-4 col-6">
                                    <h4>52%</h4>
                                    <span class="text-muted">Desktop</span>
                                </div>
                                <div class="col-md-4 col-6">
                                    <h4>80%</h4>
                                    <span class="text-muted">Mobile</span>
                                </div>
                                <div class="col-md-4 col-12">
                                    <h4>68%</h4>
                                    <span class="text-muted">Tablet</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-block">
                            <h5 class="text-center">Total Leads</h5>
                            <div class="row align-items-center justify-content-center">
                                <div class="col-auto">
                                    <h3 class="f-w-300 m-t-20">$73,48<i class="fas fa-caret-up text-c-green f-26 m-l-10"></i></h3>
                                    <span>EARNINGS</span>
                                </div>
                                <div class="col text-right">
                                    <i class="fas fa-chart-line f-30 text-c-purple"></i>
                                </div>
                            </div>
                            <div class="leads-progress mt-3">
                                <h6 class="mb-3 text-center">Quality <span class="ml-4">Delivery</span></h6>
                                <div class="progress">
                                    <div class="progress-bar progress-c-theme" role="progressbar" style="width: 30%; height:10px;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                                    <div class="progress-bar progress-c-theme2" role="progressbar" style="width: 36%; height:10px;" aria-valuenow="36" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <h6 class="text-muted f-w-300 mt-4">Total Cost <span class="float-right">340</span></h6>
                                <h6 class="text-muted f-w-300 mt-4">Quality Of Product <span class="float-right">65%</span></h6>
                                <h6 class="text-muted f-w-300 mt-4">Delivery Period <span class="float-right">4 Days</span></h6>
                                <h6 class="text-muted f-w-300 mt-4 mb-0">Buy Product <span class="float-right">245</span></h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-block">
                            <h5 class="mb-4">Your Portfolio Balance</h5>
                            <div class="row align-items-center justify-content-center">
                                <div class="col">
                                    <h3 class="f-w-300">$193,700</h3>
                                </div>
                                <div class="col-auto">
                                    <span class="text-c-green f-18">15% <i class="feather icon-arrow-up-right f-20"></i></span>
                                </div>
                            </div>
                            <div class="row m-t-25">
                                <div class="col-6">
                                    <a href="#!" class="btn btn-primary text-uppercase btn-block">Deposit</a>
                                </div>
                                <div class="col-6 p-l-0">
                                    <a href="#!" class="btn text-uppercase border btn-block btn-outline-secondary">withdraw</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card theme-bg">
                        <div class="card-block">
                            <div class="row align-items-center justify-content-center">
                                <div class="col">
                                    <h4 class="text-white">Profit</h4>
                                </div>
                                <div class="col">
                                    <h2 class="text-white text-right f-w-300">$3,764</h2>
                                </div>
                            </div>
                            <div class="m-t-50">
                                <h6 class="text-white">Monthly Profit <span class="float-right text-white">$340</span></h6>
                                <h6 class="text-white mt-3">Weekly Profit <span class="float-right text-whitw">$150</span></h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-block">
                            <h5 class="mb-4">Review With Emotions</h5>
                            <div class="review-emotion mb-3">
                                <div class="row align-items-center justify-content-center">
                                    <div class="col">
                                        <span><i class="far fa-smile text-c-green f-20"></i></span>
                                    </div>
                                    <div class="col-auto">
                                        <h5 class="m-0">235</h5>
                                    </div>
                                    <div class="col text-right">
                                        <span>Google Chrome</span>
                                    </div>
                                </div>
                            </div>
                            <div class="review-emotion mb-3">
                                <div class="row align-items-center justify-content-center">
                                    <div class="col">
                                        <span><i class="fas fa-smile text-c-purple f-20"></i></span>
                                    </div>
                                    <div class="col-auto">
                                        <h5 class="m-0">95</h5>
                                    </div>
                                    <div class="col text-right">
                                        <span>Mozilla Firefox</span>
                                    </div>
                                </div>
                            </div>
                            <div class="review-emotion mb-0">
                                <div class="row align-items-center justify-content-center">
                                    <div class="col">
                                        <span><i class="far fa-smile text-c-red f-20"></i></span>
                                    </div>
                                    <div class="col-auto">
                                        <h5 class="m-0">18</h5>
                                    </div>
                                    <div class="col text-right">
                                        <span>Internet Explore</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-xl-4 datta-example">
                    <div class="card theme-bg card-Revenue">
                        <div class="card-block">
                            <h5 class="text-white">Total Revenue</h5>
                            <div class="row align-items-center justify-content-center">
                                <div class="col-auto">
                                    <i class="feather icon-file-text f-30 text-white"></i>
                                </div>
                                <div class="col">
                                    <div class="float-right text-white mr-4">
                                        <h6 class="text-white mb-2">This Month</h6>
                                        <span class="d-block mb-2">$ 2018</span>
                                        <span>+175 (22.5%)</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card theme-bg Invoice-bar">
                        <div class="card-block">
                            <div class="invoice-lable text-right">
                                <span><label class="label f-14">monthly</label></span>
                            </div>
                            <div class="row">
                                <div class="col-auto">
                                    <i class="fas fa-file-alt f-30 text-white"></i>
                                </div>
                                <div class="col">
                                    <h5 class="text-white">Invoices</h5>
                                    <h3 class="text-white">450</h3>
                                    <div class="progress mt-3">
                                        <div class="progress-bar bg-white" role="progressbar" style="width: 50%; height:7px;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card theme-bg location-sale">
                        <div class="card-block">
                            <i class="card-icon fas fa-map-marker-alt text-c-purple f-30"></i>
                            <h5 class="text-white mt-3">Location Sale <span class="float-right">23% <i class="fas fa-arrow-down text-white"></i></span></h5>
                            <h3 class="text-white d-flex align-items-center justify-content-between m-t-50 mb-0">$ 1372,05 <span class="float-right f-16">+ $23,13 (12%)</span></h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-xl-4 datta-example">
                    <div class="card card-Impression">
                        <div class="card-block">
                            <div class="row align-items-center justify-content-center">
                                <div class="col">
                                    <h5 class="mb-3">Impression</h5>
                                    <h3 class="mb-2 f-w-300">1,563</h3>
                                    <span class="text-muted">May 23 - June 01 (2017)</span>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-eye text-white f-20"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card card-Impression">
                        <div class="card-block">
                            <div class="row align-items-center justify-content-center">
                                <div class="col">
                                    <h5 class="mb-3">Sales Prediction</h5>
                                    <h3 class="mb-2 f-w-300">2,013</h3>
                                    <span class="text-muted">July 01 - June 01 (2016)</span>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-dolly text-white f-20"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card card-Impression">
                        <div class="card-block">
                            <div class="row align-items-center justify-content-center">
                                <div class="col">
                                    <h5 class="mb-3">Email Sent</h5>
                                    <h3 class="mb-2 f-w-300">1,563</h3>
                                    <span class="text-muted">Sep 23 - Nov 06 (2015)</span>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-envelope text-white f-20"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-xl-4 datta-example">
                    <div class="card card-customer">
                        <div class="card-block">
                            <div class="row align-items-center justify-content-center">
                                <div class="col">
                                    <h2 class="mb-2 f-w-300">3210</h2>
                                    <h5 class="text-muted mb-0">Happy Customer</h5>
                                </div>
                                <div class="col-auto">
                                    <i class="feather icon-users f-30 text-white theme-bg"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card card-customer">
                        <div class="card-block">
                            <div class="row align-items-center justify-content-center">
                                <div class="col">
                                    <h2 class="mb-2 f-w-300">432</h2>
                                    <h5 class="text-muted mb-0">Award Winning</h5>
                                </div>
                                <div class="col-auto">
                                    <i class="feather icon-award f-30 text-white theme-bg2"></i>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card card-customer">
                        <div class="card-block">
                            <div class="row align-items-center justify-content-center">
                                <div class="col">
                                    <h2 class="mb-2 f-w-300">4230</h2>
                                    <h5 class="text-muted mb-0">Project Completed</h5>
                                </div>
                                <div class="col-auto">
                                    <i class="feather icon-check-square f-30 text-white theme-bg"></i>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-xl-4 datta-example">
                    <div class="card theme-bg2 ticket-customer">
                        <div class="card-block">
                            <div class="row align-items-center justify-content-center">
                                <div class="col-auto">
                                    <h2 class="text-white mb-0 f-w-300">286</h2>
                                </div>
                                <div class="col">
                                    <span class="text-white d-block">+134</span>
                                    <span class="text-white">Since last week</span>
                                </div>
                            </div>
                            <h5 class="text-white f-w-300 mt-4">Ticket Answered</h5>
                            <i class="fas fa-file-alt text-white f-70"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-block ticket-visitor">
                            <h3 class="mb-2">7210</h3>
                            <h5 class="text-muted f-w-300 mb-4">Visitors</h5>
                            <div class="progress">
                                <div class="progress-bar progress-c-theme2" role="progressbar" style="width: 72%;height:13px;" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100">72%</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card theme-bg2">
                        <div class="card-block customer-visitor">
                            <h2 class="text-white text-right mt-2 f-w-300">3254</h2>
                            <span class="text-white text-right d-block">Customers</span>
                            <i class="fas fa-globe text-white"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-xl-4 datta-example">
                    <div class="card card-social">
                        <div class="card-block border-bottom">
                            <div class="row align-items-center justify-content-center">
                                <div class="col-auto">
                                    <i class="fab fa-facebook-f text-primary f-36"></i>
                                </div>
                                <div class="col text-right">
                                    <h3>12,281</h3>
                                    <h5 class="text-c-green mb-0">+7.2% <span class="text-muted">Total Likes</span></h5>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div class="row align-items-center justify-content-center card-active">
                                <div class="col-6">
                                    <h6 class="text-center m-b-10"><span class="text-muted m-r-5">Target:</span>35,098</h6>
                                    <div class="progress">
                                        <div class="progress-bar progress-c-theme" role="progressbar" style="width:60%;height:6px;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <h6 class="text-center m-b-10"><span class="text-muted m-r-5">Duration:</span>350</h6>
                                    <div class="progress">
                                        <div class="progress-bar progress-c-theme2" role="progressbar" style="width:45%;height:6px;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card card-social">
                        <div class="card-block border-bottom">
                            <div class="row align-items-center justify-content-center">
                                <div class="col-auto">
                                    <i class="fab fa-twitter text-c-blue f-36"></i>
                                </div>
                                <div class="col text-right">
                                    <h3>11,200</h3>
                                    <h5 class="text-c-purple mb-0">+6.2% <span class="text-muted">Total Likes</span></h5>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div class="row align-items-center justify-content-center card-active">
                                <div class="col-6">
                                    <h6 class="text-center m-b-10"><span class="text-muted m-r-5">Target:</span>34,185</h6>
                                    <div class="progress">
                                        <div class="progress-bar progress-c-green" role="progressbar" style="width:40%;height:6px;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <h6 class="text-center m-b-10"><span class="text-muted m-r-5">Duration:</span>800</h6>
                                    <div class="progress">
                                        <div class="progress-bar progress-c-blue" role="progressbar" style="width:70%;height:6px;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card card-social">
                        <div class="card-block border-bottom">
                            <div class="row align-items-center justify-content-center">
                                <div class="col-auto">
                                    <i class="fab fa-google-plus-g text-c-red f-36"></i>
                                </div>
                                <div class="col text-right">
                                    <h3>10,500</h3>
                                    <h5 class="text-c-blue mb-0">+5.9% <span class="text-muted">Total Likes</span></h5>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div class="row align-items-center justify-content-center card-active">
                                <div class="col-6">
                                    <h6 class="text-center m-b-10"><span class="text-muted m-r-5">Target:</span>25,998</h6>
                                    <div class="progress">
                                        <div class="progress-bar progress-c-theme" role="progressbar" style="width:80%;height:6px;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <h6 class="text-center m-b-10"><span class="text-muted m-r-5">Duration:</span>900</h6>
                                    <div class="progress">
                                        <div class="progress-bar progress-c-theme2" role="progressbar" style="width:50%;height:6px;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card Online-Order">
                        <div class="card-block">
                            <h5>Online Orders</h5>
                            <h6 class="text-muted d-flex align-items-center justify-content-between m-t-30">Delivery Orders<span class="float-right f-18 text-c-green">237 / 400</span></h6>
                            <div class="progress mt-3">
                                <div class="progress-bar progress-c-theme" role="progressbar" style="width:65%;height:6px;" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <span class="text-muted mt-2 d-block">37% Done</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card Online-Order">
                        <div class="card-block">
                            <h5>Pending Orders</h5>
                            <h6 class="text-muted d-flex align-items-center justify-content-between m-t-30">pending Orders<span class="float-right f-18 text-c-purple">100 / 500</span></h6>
                            <div class="progress mt-3">
                                <div class="progress-bar progress-c-theme2" role="progressbar" style="width:50%;height:6px;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <span class="text-muted mt-2 d-block">20% pending</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-xl-4 datta-example">
                    <div class="card Online-Order">
                        <div class="card-block">
                            <h5>Return Orders</h5>
                            <h6 class="text-muted d-flex align-items-center justify-content-between m-t-30">Return Orders<span class="float-right f-18 text-c-blue">50 / 400</span></h6>
                            <div class="progress mt-3">
                                <div class="progress-bar progress-c-blue" role="progressbar" style="width:40%;height:6px;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <span class="text-muted mt-2 d-block">10% Return</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card affilate-offers">
                        <div class="card-block">
                            <h5>Affiliate <span class="float-right"><i class="card-icon fas fa-donate f-24"></i></span></h5>
                            <h2 class="mt-4 mb-0 d-flex align-items-center justify-content-between f-w-300">3,789 <label class="label theme-bg text-white f-12 f-w-400 float-right">4+</label></h2>
                            <h6 class="d-flex align-items-center justify-content-center  mt-3">From First week 13.5% <i class="fas fa-caret-up text-c-green f-26 m-l-10"></i></h6>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-block team-leader">
                            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                                <ol class="carousel-indicators">
                                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                                </ol>
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <div class="row">
                                            <div class="col-auto">
                                                <img class="rounded-circle" style="width:85px;" src="assets/images/user/avatar-2.jpg" alt="activity-user">
                                            </div>
                                            <div class="col">
                                                <h5 class="mb-3">Jarvis Pepperspray</h5>
                                                <span class="f-w-300 text-muted mb-3 d-block">Separated they live in Bookmarksgrove..</span>
                                                <span>Team leader</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="carousel-item">
                                        <div class="row">
                                            <div class="col-auto">
                                                <img class="rounded-circle" style="width:85px;" src="assets/images/user/avatar-1.jpg" alt="activity-user">
                                            </div>
                                            <div class="col">
                                                <h5 class="mb-3">Jarvis Pepperspray</h5>
                                                <span class="f-w-300 text-muted mb-3 d-block">Separated they live in Bookmarksgrove..</span>
                                                <span>Team leader</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="carousel-item">
                                        <div class="row">
                                            <div class="col-auto">
                                                <img class="rounded-circle" style="width:85px;" src="assets/images/user/avatar-3.jpg" alt="activity-user">
                                            </div>
                                            <div class="col">
                                                <h5 class="mb-3">Jarvis Pepperspray</h5>
                                                <span class="f-w-300 text-muted mb-3 d-block">Separated they live in Bookmarksgrove..</span>
                                                <span>Team leader</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-xl-4 datta-example">
                    <div class="card affilate-offers">
                        <div class="card-block">
                            <h5>Offers<span class="float-right"><i class="card-icon fas fa-hand-holding-usd f-24"></i></span></h5>
                            <h2 class="mt-4 mb-0 d-flex align-items-center justify-content-between f-w-300">2,586 <label class="label theme-bg text-white f-12 f-w-400 float-right">10+</label></h2>
                            <h6 class="d-flex align-items-center justify-content-center mt-3">From Last week 15.5% <i class="fas fa-caret-up text-c-green f-26 m-l-10"></i></h6>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card theme-bg earning-date">
                        <div class="card-header borderless">
                            <h5 class="text-white">Earnings</h5>
                        </div>
                        <div class="card-block">
                            <div class="bd-example bd-example-tabs">
                                <div class="tab-content" id="tabContent-pills">
                                    <div class="tab-pane fade show active" id="earnings-mon" role="tabpanel" aria-labelledby="pills-earnings-mon">
                                        <h2 class="text-white mb-3 f-w-300">359,234<i class="feather icon-arrow-up"></i></h2>
                                        <span class="text-white mb-4 d-block">TOTAL EARNINGS</span>
                                    </div>
                                    <div class="tab-pane fade" id="earnings-tue" role="tabpanel" aria-labelledby="pills-earnings-tue">
                                        <h2 class="text-white mb-3 f-w-300">222,586<i class="feather icon-arrow-down"></i></h2>
                                        <span class="text-white mb-4 d-block">TOTAL EARNINGS</span>
                                    </div>
                                    <div class="tab-pane fade" id="earnings-wed" role="tabpanel" aria-labelledby="pills-earnings-wed">
                                        <h2 class="text-white mb-3 f-w-300">859,745<i class="feather icon-arrow-up"></i></h2>
                                        <span class="text-white mb-4 d-block">TOTAL EARNINGS</span>
                                    </div>
                                    <div class="tab-pane fade" id="earnings-thu" role="tabpanel" aria-labelledby="pills-earnings-thu">
                                        <h2 class="text-white mb-3 f-w-300">785,684<i class="feather icon-arrow-up"></i></h2>
                                        <span class="text-white mb-4 d-block">TOTAL EARNINGS</span>
                                    </div>
                                    <div class="tab-pane fade" id="earnings-fri" role="tabpanel" aria-labelledby="pills-earnings-fri">
                                        <h2 class="text-white mb-3 f-w-300">123,486<i class="feather icon-arrow-down"></i></h2>
                                        <span class="text-white mb-4 d-block">TOTAL EARNINGS</span>
                                    </div>
                                    <div class="tab-pane fade" id="earnings-sat" role="tabpanel" aria-labelledby="pills-earnings-sat">
                                        <h2 class="text-white mb-3 f-w-300">762,963<i class="feather icon-arrow-up"></i></h2>
                                        <span class="text-white mb-4 d-block">TOTAL EARNINGS</span>
                                    </div>
                                    <div class="tab-pane fade" id="earnings-sun" role="tabpanel" aria-labelledby="pills-earnings-sun">
                                        <h2 class="text-white mb-3 f-w-300">984,632<i class="feather icon-arrow-down"></i></h2>
                                        <span class="text-white mb-4 d-block">TOTAL EARNINGS</span>
                                    </div>
                                </div>
                                <ul class="nav nav-pills align-items-center justify-content-center" id="pills-tab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="pills-earnings-mon" data-toggle="pill" href="#earnings-mon" role="tab" aria-controls="earnings-mon" aria-selected="true">Mon</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="pills-earnings-tue" data-toggle="pill" href="#earnings-tue" role="tab" aria-controls="earnings-tue" aria-selected="false">Tue</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="pills-earnings-wed" data-toggle="pill" href="#earnings-wed" role="tab" aria-controls="earnings-wed" aria-selected="false">Wed</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="pills-earnings-thu" data-toggle="pill" href="#earnings-thu" role="tab" aria-controls="earnings-thu" aria-selected="false">Thu</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="pills-earnings-fri" data-toggle="pill" href="#earnings-fri" role="tab" aria-controls="earnings-fri" aria-selected="false">Fri</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="pills-earnings-sat" data-toggle="pill" href="#earnings-sat" role="tab" aria-controls="earnings-sat" aria-selected="false">Sat</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="pills-earnings-sun" data-toggle="pill" href="#earnings-sun" role="tab" aria-controls="earnings-sun" aria-selected="false">Sun</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-block">
                            <h2 class="mb-3 f-w-300">$894.39</h2>
                            <h5 class="text-muted"><span class="f-14 mr-1">Deposits:</span>$10,000</h5>
                            <h5 class="mt-3 text-c-blue mb-4"><i class="fas fa-caret-down text-c-blue f-22"></i> 5.2% ($456)</h5>
                            <a href="#!" class="btn btn-primary shadow-2 text-uppercase btn-block" style="max-width:150px;margin:0 auto;">add funds</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-xl-4 datta-example">
                    <div class="card theme-bg earning-date">
                        <div class="card-header borderless">
                            <h5 class="text-white">Page View</h5>
                        </div>
                        <div class="card-block">
                            <div class="bd-example bd-example-tabs">
                                <div class="tab-content" id="pills-tabContent2">
                                    <div class="tab-pane fade show active" id="view-mon" role="tabpanel" aria-labelledby="pills-view-mon">
                                        <h2 class="text-white mb-3 f-w-300">9,456<i class="feather icon-arrow-up"></i></h2>
                                        <span class="text-white mb-4 d-block">TOTAL VIEWS</span>
                                    </div>
                                    <div class="tab-pane fade" id="view-tue" role="tabpanel" aria-labelledby="pills-view-tue">
                                        <h2 class="text-white mb-3 f-w-300">8,568<i class="feather icon-arrow-down"></i></h2>
                                        <span class="text-white mb-4 d-block">TOTAL VIEWS</span>
                                    </div>
                                    <div class="tab-pane fade" id="view-wed" role="tabpanel" aria-labelledby="pills-view-wed">
                                        <h2 class="text-white mb-3 f-w-300">3,756<i class="feather icon-arrow-up"></i></h2>
                                        <span class="text-white mb-4 d-block">TOTAL VIEWS</span>
                                    </div>
                                    <div class="tab-pane fade" id="view-thu" role="tabpanel" aria-labelledby="pills-view-thu">
                                        <h2 class="text-white mb-3 f-w-300">9,635<i class="feather icon-arrow-up"></i></h2>
                                        <span class="text-white mb-4 d-block">TOTAL VIEWS</span>
                                    </div>
                                    <div class="tab-pane fade" id="view-fri" role="tabpanel" aria-labelledby="pills-view-fri">
                                        <h2 class="text-white mb-3 f-w-300">23,486<i class="feather icon-arrow-down"></i></h2>
                                        <span class="text-white mb-4 d-block">TOTAL VIEWS</span>
                                    </div>
                                    <div class="tab-pane fade" id="view-sat" role="tabpanel" aria-labelledby="pills-view-sat">
                                        <h2 class="text-white mb-3 f-w-300">86,789<i class="feather icon-arrow-up"></i></h2>
                                        <span class="text-white mb-4 d-block">TOTAL VIEWS</span>
                                    </div>
                                    <div class="tab-pane fade" id="view-sun" role="tabpanel" aria-labelledby="pills-view-sun">
                                        <h2 class="text-white mb-3 f-w-300">93,628<i class="feather icon-arrow-down"></i></h2>
                                        <span class="text-white mb-4 d-block">TOTAL VIEWS</span>
                                    </div>
                                </div>
                                <ul class="nav nav-pills align-items-center justify-content-center" id="pills-tab2" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="pills-view-mon" data-toggle="pill" href="#view-mon" role="tab" aria-controls="view-mon" aria-selected="true">Mon</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="pills-view-tue" data-toggle="pill" href="#view-tue" role="tab" aria-controls="view-tue" aria-selected="false">Tue</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="pills-view-wed" data-toggle="pill" href="#view-wed" role="tab" aria-controls="view-wed" aria-selected="false">Wed</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="pills-view-thu" data-toggle="pill" href="#view-thu" role="tab" aria-controls="view-thu" aria-selected="false">Thu</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="pills-view-fri" data-toggle="pill" href="#view-fri" role="tab" aria-controls="view-fri" aria-selected="false">Fri</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="pills-view-sat" data-toggle="pill" href="#view-sat" role="tab" aria-controls="view-sat" aria-selected="false">Sat</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="pills-view-sun" data-toggle="pill" href="#view-sun" role="tab" aria-controls="view-sun" aria-selected="false">Sun</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Miami, Florida</h5>
                        </div>
                        <div class="card-block sale-view">
                            <h3>14,678</h3>
                            <h6 class="text-muted">USD</h6>
                            <span class="text-muted">Today’s Sales</span>
                            <div class="row align-items-center justify-content-center">
                                <div class="col">
                                    <div id="sale-view" style="height:80px;width:100px;"></div>
                                </div>
                                <div class="col-auto text-right">
                                    <i class="fas fa-coins f-30 text-white theme-bg"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                floatchart()
                            }, 700);
                            $(window).on('resize', function() {
                                floatchart();
                            });
                            $('#mobile-collapse').on('click', function() {
                                setTimeout(function() {
                                    floatchart();
                                }, 700);
                            });

                            function floatchart() {
                                $(function() {
                                    $.plot($("#sale-view"), [{
                                        data: [
                                            [0, 10],
                                            [1, 20],
                                            [2, 10],
                                            [3, 27],
                                            [4, 10],
                                            [5, 20],
                                            [6, 15],
                                            [7, 24],
                                            [8, 16],
                                            [9, 20],
                                            [10, 10],
                                            [11, 18],
                                            [12, 20],
                                            [13, 10],
                                            [14, 5],
                                        ],
                                        color: "#04a9f5",
                                        bars: {
                                            show: true,
                                            lineWidth: 0,
                                            fill: true,
                                            barWidth: 0.5,
                                            align: 'center',
                                            horizontal: false,
                                            fillColor: {
                                                colors: [{
                                                    opacity: 1
                                                }, {
                                                    opacity: 1
                                                }]
                                            },
                                        },
                                        points: {
                                            show: false,
                                            radius: 3,
                                            fill: true
                                        },
                                        curvedLines: {
                                            apply: false,
                                        }
                                    }], {
                                        series: {
                                            label: "",
                                            curvedLines: {
                                                active: true,
                                                nrSplinePoints: 0
                                            },
                                        },
                                        tooltip: {
                                            show: true,
                                            content: "x : %x | y : %y"
                                        },
                                        grid: {
                                            hoverable: true,
                                            borderWidth: 0,
                                            labelMargin: 0,
                                            axisMargin: 0,
                                            minBorderMargin: 0,
                                        },
                                        yaxis: {
                                            min: 0,
                                            max: 30,
                                            color: 'transparent',
                                            font: {
                                                size: 0,
                                            }
                                        },
                                        xaxis: {
                                            color: 'transparent',
                                            font: {
                                                size: 0,
                                            }
                                        }
                                    });
                                });
                            }
                        });
                    </script>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Silje Larsen</h5>
                        </div>
                        <div class="card-block sale-view">
                            <h3>15,678</h3>
                            <h6 class="text-muted">USD</h6>
                            <span class="text-muted">Weekly Sales</span>
                            <div class="row align-items-center justify-content-center">
                                <div class="col">
                                    <div id="sale-view-second" style="height:80px;width:100px;"></div>
                                </div>
                                <div class="col-auto text-right">
                                    <i class="fab fa-bitcoin f-30 text-white theme-bg"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                floatchart()
                            }, 700);
                            $(window).on('resize', function() {
                                floatchart();
                            });
                            $('#mobile-collapse').on('click', function() {
                                setTimeout(function() {
                                    floatchart();
                                }, 700);
                            });

                            function floatchart() {
                                $(function() {
                                    $.plot($("#sale-view-second"), [{
                                        data: [
                                            [0, 10],
                                            [1, 20],
                                            [2, 10],
                                            [3, 27],
                                            [4, 10],
                                            [5, 20],
                                            [6, 15],
                                            [7, 24],
                                            [8, 16],
                                            [9, 20],
                                            [10, 10],
                                            [11, 18],
                                            [12, 20],
                                            [13, 10],
                                            [14, 5],
                                        ],
                                        color: "#1de9b6",
                                        bars: {
                                            show: true,
                                            lineWidth: 0,
                                            fill: true,
                                            barWidth: 0.5,
                                            align: 'center',
                                            horizontal: false,
                                            fillColor: {
                                                colors: [{
                                                    opacity: 1
                                                }, {
                                                    opacity: 1
                                                }]
                                            },
                                        },
                                        points: {
                                            show: false,
                                            radius: 3,
                                            fill: true
                                        },
                                        curvedLines: {
                                            apply: false,
                                        }
                                    }], {
                                        series: {
                                            label: "",
                                            curvedLines: {
                                                active: true,
                                                nrSplinePoints: 0
                                            },
                                        },
                                        tooltip: {
                                            show: true,
                                            content: "x : %x | y : %y"
                                        },
                                        grid: {
                                            hoverable: true,
                                            borderWidth: 0,
                                            labelMargin: 0,
                                            axisMargin: 0,
                                            minBorderMargin: 0,
                                        },
                                        yaxis: {
                                            min: 0,
                                            max: 30,
                                            color: 'transparent',
                                            font: {
                                                size: 0,
                                            }
                                        },
                                        xaxis: {
                                            color: 'transparent',
                                            font: {
                                                size: 0,
                                            }
                                        }
                                    });
                                });
                            }
                        });
                    </script>
                </div>
                <div class="col-md-12 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Ida Jorgensen</h5>
                        </div>
                        <div class="card-block sale-view">
                            <h3>50,853</h3>
                            <h6 class="text-muted">USD</h6>
                            <span class="text-muted">Monthly Sales</span>
                            <div class="row align-items-center justify-content-center">
                                <div class="col">
                                    <div id="sale-view-third" style="height:80px;width:100px;"></div>
                                </div>
                                <div class="col-auto text-right">
                                    <i class="fas fa-database f-30 text-white theme-bg"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                floatchart()
                            }, 700);
                            $(window).on('resize', function() {
                                floatchart();
                            });
                            $('#mobile-collapse').on('click', function() {
                                setTimeout(function() {
                                    floatchart();
                                }, 700);
                            });

                            function floatchart() {
                                $(function() {
                                    $.plot($("#sale-view-third"), [{
                                        data: [
                                            [0, 10],
                                            [1, 20],
                                            [2, 10],
                                            [3, 27],
                                            [4, 10],
                                            [5, 20],
                                            [6, 15],
                                            [7, 24],
                                            [8, 16],
                                            [9, 20],
                                            [10, 10],
                                            [11, 18],
                                            [12, 20],
                                            [13, 10],
                                            [14, 5],
                                        ],
                                        color: "#ff5252",
                                        bars: {
                                            show: true,
                                            lineWidth: 0,
                                            fill: true,
                                            barWidth: 0.5,
                                            align: 'center',
                                            horizontal: false,
                                            fillColor: {
                                                colors: [{
                                                    opacity: 1
                                                }, {
                                                    opacity: 1
                                                }]
                                            },
                                        },
                                        points: {
                                            show: false,
                                            radius: 3,
                                            fill: true
                                        },
                                        curvedLines: {
                                            apply: false,
                                        }
                                    }], {
                                        series: {
                                            label: "",
                                            curvedLines: {
                                                active: true,
                                                nrSplinePoints: 0
                                            },
                                        },
                                        tooltip: {
                                            show: true,
                                            content: "x : %x | y : %y"
                                        },
                                        grid: {
                                            hoverable: true,
                                            borderWidth: 0,
                                            labelMargin: 0,
                                            axisMargin: 0,
                                            minBorderMargin: 0,
                                        },
                                        yaxis: {
                                            min: 0,
                                            max: 30,
                                            color: 'transparent',
                                            font: {
                                                size: 0,
                                            }
                                        },
                                        xaxis: {
                                            color: 'transparent',
                                            font: {
                                                size: 0,
                                            }
                                        }
                                    });
                                });
                            }
                        });
                    </script>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card project-task">
                        <div class="card-block">
                            <div class="row align-items-center justify-content-center">
                                <div class="col">
                                    <h5 class="m-0"><i class="far fa-edit m-r-10"></i>Project Task</h5>
                                </div>
                                <div class="col-auto">
                                    <label class="label theme-bg text-white f-14 f-w-400 float-right">23% Done</label>
                                </div>
                            </div>
                            <h6 class="text-muted mt-4 mb-3">Complete Task : 6/10</h6>
                            <div class="progress">
                                <div class="progress-bar progress-c-theme" role="progressbar" style="width:60%;height:6px;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <h6 class="mt-3 mb-0 text-center text-muted">Project Team : 28 Persons</h6>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-block">
                            <h5 class="mb-4">Sales Statistics</h5>
                            <h3 class="mb-4">23,0598</h3>
                            <span class="text-muted d-block">Top selling items statistic by last month</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-xl-4 datta-example">
                    <div class="card card-event">
                        <div class="card-block">
                            <div class="row align-items-center justify-content-center">
                                <div class="col">
                                    <h5 class="m-0">Upcoming Event</h5>
                                </div>
                                <div class="col-auto">
                                    <label class="label theme-bg2 text-white f-14 f-w-400 float-right">34%</label>
                                </div>
                            </div>
                            <h2 class="mt-2 f-w-300">45<sub class="text-muted f-14">Competitors</sub></h2>
                            <h6 class="text-muted mt-3 mb-0">You can participate in event </h6>
                            <i class="fab fa-angellist text-c-purple f-50"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card theme-bg bitcoin-wallet">
                        <div class="card-block">
                            <h5 class="text-white mb-2">Bitcoin Wallet</h5>
                            <h2 class="text-white mb-3 f-w-300">$9,302</h2>
                            <span class="text-white d-block">Ratings by Market Capitalization</span>
                            <i class="fab fa-btc f-70 text-white"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card theme-bg2 bitcoin-wallet">
                        <div class="card-block">
                            <h5 class="text-white mb-2">Bitcoin Wallet</h5>
                            <h2 class="text-white mb-3 f-w-300">$8,101</h2>
                            <span class="text-white d-block">Ratings by Market Capitalization</span>
                            <i class="fas fa-dollar-sign f-70 text-white"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-xl-4 datta-example">
                    <div class="card bg-c-blue bitcoin-wallet">
                        <div class="card-block">
                            <h5 class="text-white mb-2">Bitcoin Wallet</h5>
                            <h2 class="text-white mb-3 f-w-300">$7,501</h2>
                            <span class="text-white d-block">Ratings by Market Capitalization</span>
                            <i class="fas fa-pound-sign f-70 text-white"></i>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-block">
                            <div class="row align-items-center justify-content-center">
                                <div class="col">
                                    <h3 class="text-c-green">2,02,150</h3>
                                    <h5>Total Orders</h5>
                                </div>
                                <div class="col text-right">
                                    <img src="assets/images/widget/shape1.png" style="width:80px;" alt="activity-user">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-block">
                            <div class="row align-items-center justify-content-center">
                                <div class="col">
                                    <h3 class="text-c-red">8940</h3>
                                    <h5>New Orders</h5>
                                </div>
                                <div class="col text-right">
                                    <img src="assets/images/widget/shape2.png" style="width:80px;" alt="activity-user">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-12 datta-example">
                    <div class="card">
                        <div class="card-block">
                            <div class="row align-items-center justify-content-center">
                                <div class="col">
                                    <h3 class="text-c-green">$52,510</h3>
                                    <h5>Total Revenue</h5>
                                </div>
                                <div class="col text-right">
                                    <img src="assets/images/widget/shape3.png" style="width:80px;" alt="activity-user">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card theme-bg">
                        <div class="card-block">
                            <div class="row align-items-center justify-content-center">
                                <div class="col-auto">
                                    <img src="assets/images/widget/shape4.png" alt="activity-user">
                                </div>
                                <div class="col">
                                    <h2 class="text-white f-w-300">520</h2>
                                    <h5 class="text-white">All Properties</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card theme-bg2">
                        <div class="card-block">
                            <div class="row align-items-center justify-content-center">
                                <div class="col-auto">
                                    <img src="assets/images/widget/shape5.png" alt="activity-user">
                                </div>
                                <div class="col">
                                    <h2 class="text-white f-w-300">375</h2>
                                    <h5 class="text-white">Sale Product</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-12 datta-example">
                    <div class="card theme-bg">
                        <div class="card-block">
                            <div class="row align-items-center justify-content-center">
                                <div class="col-auto">
                                    <img src="assets/images/widget/shape6.png" alt="activity-user">
                                </div>
                                <div class="col">
                                    <h2 class="text-white f-w-300">$874</h2>
                                    <h5 class="text-white">Total Earnings</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-block">
                            <h5 class="m-b-30">Product Summary</h5>
                            <div class="media summary-box mb-4">
                                <div class="photo-table">
                                    <h3 class="m-0 f-w-300">$ 1935.26 <i class="fas fa-caret-up text-c-green f-26 m-l-8"></i></h3>
                                    <span>Profit</span>
                                </div>
                                <div class="media-body">
                                    <i class="card-icon feather icon-download float-right f-34"></i>
                                </div>
                            </div>
                            <div class="media summary-box mb-4">
                                <div class="photo-table">
                                    <h3 class="m-0 f-w-300">$ 2356.42 <i class="fas fa-caret-up text-c-green f-26 m-l-8"></i></h3>
                                    <span>Invoiced</span>
                                </div>
                                <div class="media-body">
                                    <i class="card-icon feather icon-download float-right f-34"></i>
                                </div>
                            </div>
                            <div class="media summary-box mb-4">
                                <div class="photo-table">
                                    <h3 class="m-0 f-w-300">$ 4683.96 <i class="fas fa-caret-down text-c-red f-26 m-l-8"></i></h3>
                                    <span>Expenses</span>
                                </div>
                                <div class="media-body">
                                    <i class="card-icon feather icon-download float-right f-34"></i>
                                </div>
                            </div>
                            <a href="#!" class="btn btn-primary shadow-2 text-uppercase btn-block" style="max-width:150px;margin:0 auto;">add friend</a>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card statistial-visit">
                        <div class="card-header">
                            <h5>Statistical</h5>
                            <span class="text-muted d-block mt-1">Status : live</span>
                        </div>
                        <div class="card-block">
                            <h3 class="f-w-300">4,445,701</h3>
                            <span class="d-block"><i class="fas fa-map-marker-alt m-r-10"></i>256 Countries, 5667 Cites </span>
                            <div class="media mt-4">
                                <div class="photo-table">
                                    <h6> Our Overseas visits</h6>
                                    <div class="progress">
                                        <div class="progress-bar progress-c-theme" role="progressbar" style="width:60%;height:6px;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="media-body">
                                    <label class="label theme-bg text-white f-14 f-w-400 float-right">14%</label>
                                </div>
                            </div>
                            <div class="media mt-4">
                                <div class="photo-table">
                                    <h6> Our Overseas visits</h6>
                                    <div class="progress">
                                        <div class="progress-bar progress-c-theme2" role="progressbar" style="width:60%;height:6px;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="media-body">
                                    <label class="label theme-bg2 text-white f-14 f-w-400 float-right">14%</label>
                                </div>
                            </div>
                            <div class="media mt-4">
                                <div class="photo-table">
                                    <h6> Our Overseas visits</h6>
                                    <div class="progress">
                                        <div class="progress-bar progress-c-blue" role="progressbar" style="width:60%;height:6px;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="media-body">
                                    <label class="label bg-c-blue text-white f-14 f-w-400 float-right">14%</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- owl carousel css --&gt;
                    &lt;link href="assets/plugins/owl-carousel/css/owl.carousel.min.css" rel="stylesheet"&gt;<br>
                    &lt;!-- owl carousel Js --&gt;
                    &lt;script src="assets/plugins/owl-carousel/js/owl.carousel.min.js"&gt;&lt;/script&gt;<br>
                    &lt;!-- Float chart Js --&gt;
                    &lt;script src="assets/plugins/flot/js/jquery.flot.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/flot/js/jquery.flot.categories.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/flot/js/curvedLines.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/flot/js/jquery.flot.tooltip.min.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-data">Data</h2>
            <div class="row">
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card user-list">
                        <div class="card-header">
                            <h5>Rating</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div class="row align-items-center justify-content-center m-b-20">
                                <div class="col-6">
                                    <h2 class="f-w-300 d-flex align-items-center float-left m-0">4.7 <i class="fas fa-star f-10 m-l-10 text-c-yellow"></i></h2>
                                </div>
                                <div class="col-6">
                                    <h6 class="d-flex  align-items-center float-right m-0">0.4 <i class="fas fa-caret-up text-c-green f-22 m-l-10"></i></h6>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xl-12">
                                    <h6 class="align-items-center float-left"><i class="fas fa-star f-10 m-r-10 text-c-yellow"></i>5</h6>
                                    <h6 class="align-items-center float-right">384</h6>
                                    <div class="progress m-t-30 m-b-20" style="height: 6px;">
                                        <div class="progress-bar progress-c-theme" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>

                                <div class="col-xl-12">
                                    <h6 class="align-items-center float-left"><i class="fas fa-star f-10 m-r-10 text-c-yellow"></i>4</h6>
                                    <h6 class="align-items-center float-right">145</h6>
                                    <div class="progress m-t-30 m-b-15" style="height: 6px;">
                                        <div class="progress-bar progress-c-theme" role="progressbar" style="width: 35%;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>

                                <div class="col-xl-12">
                                    <h6 class="align-items-center float-left"><i class="fas fa-star f-10 m-r-10 text-c-yellow"></i>3</h6>
                                    <h6 class="align-items-center float-right">24</h6>
                                    <div class="progress m-t-30 m-b-15" style="height: 6px;">
                                        <div class="progress-bar progress-c-theme" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>

                                <div class="col-xl-12">
                                    <h6 class="align-items-center float-left"><i class="fas fa-star f-10 m-r-10 text-c-yellow"></i>2</h6>
                                    <h6 class="align-items-center float-right">1</h6>
                                    <div class="progress m-t-30 m-b-15" style="height: 6px;">
                                        <div class="progress-bar progress-c-theme" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="col-xl-12">
                                    <h6 class="align-items-center float-left"><i class="fas fa-star f-10 m-r-10 text-c-yellow"></i>1</h6>
                                    <h6 class="align-items-center float-right">0</h6>
                                    <div class="progress m-t-30 m-b-0" style="height: 6px;">
                                        <div class="progress-bar" role="progressbar" style="width:0;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card chat-sanders">
                        <div class="card-header  borderless">
                            <h5 class="text-white">Chat with Kristina Sanders</h5>
                        </div>
                        <div class="card-block m-t-30 p-0">
                            <div class="scroll-div" id="chat-scroll">
                                <div style="padding:0 30px 35px 30px;">
                                    <p class="text-center text-muted">JUN 23 3:46PM</p>
                                    <div class="row m-b-20 received-chat align-items-end">
                                        <div class="col-auto p-r-0">
                                            <h5 class="text-white d-flex align-items-center theme-bg2 justify-content-center">k</h5>
                                        </div>
                                        <div class="col">
                                            <div class="msg">
                                                <h6 class="m-b-0">How may i help you?</h6>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row m-b-20 send-chat align-items-end">
                                        <div class="col text-right">
                                            <div class="msg">
                                                <h6 class="m-b-0 text-white">I need support for my ticket XXX.</h6>
                                            </div>
                                        </div>
                                        <div class="col-auto p-l-0">
                                            <h5 class="text-white d-flex align-items-center theme-bg justify-content-center">Y</h5>
                                        </div>
                                    </div>
                                    <div class="row m-b-20 received-chat align-items-end">
                                        <div class="col-auto p-r-0">
                                            <h5 class="text-white d-flex align-items-center theme-bg2 justify-content-center">k</h5>
                                        </div>
                                        <div class="col">
                                            <div class="msg">
                                                <h6 class="m-b-0">Our support staff will contact you soon..</h6>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row m-b-0 send-chat align-items-end">
                                        <div class="col text-right">
                                            <div class="msg">
                                                <h6 class="m-b-0 text-white">Nice to meet you!</h6>
                                            </div>
                                        </div>
                                        <div class="col-auto p-l-0">
                                            <h5 class="text-white d-flex align-items-center theme-bg justify-content-center">Y</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="right-icon-control border-top">
                            <div class="input-group input-group-button p-10">
                                <input type="text" class="form-control border-0 text-muted" placeholder="Write your message">
                                <div class="input-group-append">
                                    <button class="btn" type="button"><i class="fas f-20 fa-paper-plane"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        var ps = new PerfectScrollbar('#chat-scroll', {
                            wheelSpeed: .5,
                            swipeEasing: 0,
                            suppressScrollX: !0,
                            wheelPropagation: 1,
                            minScrollbarLength: 40,
                        });                        
                    </script>
                </div>
                <div class="col-xl-4 col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>User List</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div class="to-do-list mb-3">
                                <div class="checkbox-fade fade-in-default">
                                    <label class="check-task done-task">
                                        <input type="checkbox" checked>
                                        <span class="cr">
                                            <i class="cr-icon fas fa-check"></i>
                                        </span>
                                        <div class="row">
                                            <div class="col-auto">
                                                <img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="chat-user">
                                            </div>
                                            <div class="col">
                                                <h6>Silje Larsen</h6>
                                                <p class="text-muted m-0">Invertory System</p>
                                            </div>
                                        </div>
                                    </label>
                                </div>
                            </div>
                            <div class="to-do-list mb-3">
                                <div class="checkbox-fade fade-in-default">
                                    <label class="check-task">
                                        <input type="checkbox" value="">
                                        <span class="cr">
                                            <i class="cr-icon fas fa-check"></i>
                                        </span>
                                        <div class="row">
                                            <div class="col-auto">
                                                <img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="chat-user">
                                            </div>
                                            <div class="col">
                                                <h6>Storm Hansen</h6>
                                                <p class="text-muted m-0">System Analytic</p>
                                            </div>
                                        </div>
                                    </label>
                                </div>
                            </div>
                            <div class="to-do-list mb-3">
                                <div class="checkbox-fade fade-in-default">
                                    <label class="check-task">
                                        <input type="checkbox" value="">
                                        <span class="cr">
                                            <i class="cr-icon fas fa-check"></i>
                                        </span>
                                        <div class="row">
                                            <div class="col-auto">
                                                <img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-3.jpg" alt="chat-user">
                                            </div>
                                            <div class="col">
                                                <h6>Frida Thomsen</h6>
                                                <p class="text-muted m-0">Last login 21/03/2017</p>
                                            </div>
                                        </div>
                                    </label>
                                </div>
                            </div>
                            <div class="to-do-list mb-3">
                                <div class="checkbox-fade fade-in-default">
                                    <label class="check-task">
                                        <input type="checkbox" value="">
                                        <span class="cr">
                                            <i class="cr-icon fas fa-check"></i>
                                        </span>
                                        <div class="row">
                                            <div class="col-auto">
                                                <img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="chat-user">
                                            </div>
                                            <div class="col">
                                                <h6>Aksel Andersen</h6>
                                                <p class="text-muted m-0">Last seen 23/05/2017</p>
                                            </div>
                                        </div>
                                    </label>
                                </div>
                            </div>
                            <div class="row m-t-35">
                                <div class="col-6 p-r-0">
                                    <a href="#!" class="btn btn-primary text-uppercase btn-block">add friend</a>
                                </div>
                                <div class="col-6">
                                    <a href="#!" class="btn text-uppercase border btn-block btn-outline-secondary p-15">message</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Notifications</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div class="row">
                                <div class="col-sm-12 m-b-30">
                                    <div class="widget-timeline">
                                        <div class="media">
                                            <div class="mr-3 photo-table">
                                                <i class="fas fa-circle text-c-green f-10 m-r-10"></i>
                                                <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="chat-user"></a>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="d-inline-block">The Quick Brown Fox Jumps</h6>
                                                <p class="m-b-0 text-muted">Lorem Ipsum is simply dummy text of…</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 m-b-30">
                                    <div class="widget-timeline">
                                        <div class="media">
                                            <div class="mr-3 photo-table">
                                                <i class="fas fa-circle text-c-yellow f-10 m-r-10"></i>
                                                <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="chat-user"></a>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="d-inline-block">Over The Lazy Dog</h6>
                                                <p class="m-b-0 text-muted">Lorem Ipsum is simply dummy text of…</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 m-b-30">
                                    <div class="widget-timeline">
                                        <div class="media">
                                            <div class="mr-3 photo-table">
                                                <i class="fas fa-circle text-c-blue f-10 m-r-10"></i>
                                                <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-3.jpg" alt="chat-user"></a>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="d-inline-block">The Quick Brown Fox</h6>
                                                <p class="m-b-0 text-muted">Lorem Ipsum is simply dummy text of…</p>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 m-b-0">
                                    <div class="widget-timeline">
                                        <div class="media">
                                            <div class="mr-3 photo-table">
                                                <i class="fas fa-circle text-c-blue f-10 m-r-10"></i>
                                                <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="chat-user"></a>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="d-inline-block">The Quick Brown Fox Jumps</h6>
                                                <p class="m-b-0 text-muted">Lorem Ipsum is simply dummy text of…</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card to-do">
                        <div class="card-header">
                            <h5>To-Do</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div class="row">
                                <div class="col-sm-12 m-b-30">
                                    <div class="widget-todo">
                                        <div class="media">
                                            <div class="mr-3 photo-table">
                                                <i class="fas fa-circle text-c-green f-10 mr-2"></i>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="d-inline-block">Today 15:30</h6>
                                                <p class="m-b-0 text-muted">Meeting with Sara and Cristiane</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 m-b-30">
                                    <div class="widget-todo">
                                        <div class="media">
                                            <div class="mr-3 photo-table">
                                                <i class="fas fa-circle text-c-green f-10 mr-2"></i>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="d-inline-block">Today 19:15</h6>
                                                <p class="m-b-0 text-muted">Soccer game with family</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 m-b-30">
                                    <div class="widget-todo">
                                        <div class="media">
                                            <div class="mr-3 photo-table">
                                                <i class="fas fa-circle text-c-blue f-10 mr-2"></i>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="d-inline-block">Tomorrow 08:45</h6>
                                                <p class="m-b-0 text-muted">Check all emails</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 m-b-0">
                                    <div class="widget-todo">
                                        <div class="media">
                                            <div class="mr-3 photo-table">
                                                <i class="fas fa-circle text-c-green f-10 mr-2"></i>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="d-inline-block">Tomorrow 02:45</h6>
                                                <p class="m-b-0 text-muted">Soccer game with family</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="to-do-button">
                                    <button class="btn btn-primary"><i class="fas fa-plus f-14 mr-0"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card note-bar">
                        <div class="card-header">
                            <h5>Notifications</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block p-0">
                            <a href="#!" class="media friendlist-box">
                                <div class="mr-3 photo-table">
                                    <i class="far fa-bell f-30"></i>
                                </div>
                                <div class="media-body">
                                    <h6>New order received</h6>
                                    <span class="f-12 float-right text-muted">12.56</span>
                                    <p class="text-muted m-0">2 unread notification</p>
                                </div>
                            </a>
                            <a href="#!" class="media friendlist-box border-top">
                                <div class="mr-3 photo-table">
                                    <i class="far fa-bell f-30"></i>
                                </div>
                                <div class="media-body">
                                    <h6>New user register</h6>
                                    <span class="f-12 float-right text-muted">12.36</span>
                                    <p class="text-muted m-0">xx messages</p>
                                </div>
                            </a>
                            <a href="#!" class="media friendlist-box border-top">
                                <div class="mr-3 photo-table">
                                    <i class="far fa-bell f-30"></i>
                                </div>
                                <div class="media-body">
                                    <h6>New order register</h6>
                                    <span class="f-12 float-right text-muted">11.45</span>
                                    <p class="text-muted m-0">2 read notification</p>
                                </div>
                            </a>
                            <div class="media friendlist-box border-top">
                                <div class="mr-3 photo-table">
                                    <i class="far fa-bell f-30"></i>
                                </div>
                                <div class="media-body">
                                    <h6>New order prepend</h6>
                                    <span class="f-12 float-right text-muted">9.39</span>
                                    <p class="text-muted m-0">xx messages</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card lazy-dog">
                        <div class="card-header">
                            <h5>Do you know Datta Able is released?</h5>
                        </div>
                        <div class="card-block">
                            <p>Datta Able comes with Bootstrap 4 & Angular 6. It is best kind of own Dashboard categoty.</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card Design-sprint theme-bg2">
                        <div class="card-header borderless">
                            <h5 class="text-white">Project Design Sprint</h5>
                            <span class="d-block text-white mt-2">11 MAY 10:35</span>
                        </div>
                        <div class="card-block">
                            <p class="text-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <ul class="design-image">
                                <li>
                                    <button class="btn bg-white"><i class="fas fa-plus f-14 mr-0"></i></button>
                                </li>
                                <li><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="chat-user"></li>
                                <li><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="chat-user"></li>
                                <li><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-3.jpg" alt="chat-user"></li>
                                <li class="text-white">+63</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card widget-content">
                        <div class="card-block">
                            <div class="row">
                                <div class="col-sm-12 m-b-20">
                                    <div class="widget-lorem">
                                        <div class="media align-items-center justify-content-center receive-bar">
                                            <div class="mr-3 photo-table">
                                                <h5 class="theme-bg text-white d-flex align-items-center justify-content-center">Q</h5>
                                            </div>
                                            <div class="media-body">
                                                <h4>What is Lorem Ipsum?</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 m-b-0">
                                    <div class="widget-lorem">
                                        <div class="media send-bar">
                                            <div class="mr-3 photo-table">
                                                <h5 class="text-white d-flex theme-bg2 align-items-center justify-content-center">A</h5>
                                            </div>
                                            <div class="media-body">
                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12 datta-example">
                    <div class="card social-media">
                        <div class="card-header">
                            <h5>Social Media Comparison</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div class="row">
                                <div class="col-xl-12 mb-4">
                                    <h6 class="m-b-20 text-center">Facebook<span class="ml-4">Twitter</span></h6>
                                    <div class="progress">
                                        <h5 class="m-r-20 m-b-0">67%</h5>
                                        <div class="progress-bar progress-c-theme2" role="progressbar" style="width: 40%; height:12px;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                                        <div class="progress-bar progress-c-theme" role="progressbar" style="width: 40%; height:12px;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                                        <h5 class="m-l-20 m-b-0">23%</h5>
                                    </div>
                                    <h6 class="m-t-20 text-center text-muted">5326<span class="m-l-15">234</span></h6>
                                </div>
                                <div class="col-xl-12  mb-4">
                                    <h6 class="m-b-20 text-center">Pinterest<span class="ml-4">Instagram</span></h6>
                                    <div class="progress">
                                        <h5 class="m-r-20 m-b-0">46%</h5>
                                        <div class="progress-bar progress-c-theme2" role="progressbar" style="width: 30%; height:12px;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                                        <div class="progress-bar progress-c-theme" role="progressbar" style="width: 35%; height:12px;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
                                        <h5 class="m-l-20 m-b-0">54%</h5>
                                    </div>
                                    <h6 class="m-t-20 text-center text-muted">2856<span class="m-l-15">5258</span></h6>
                                </div>
                                <div class="col-xl-12  mb-0">
                                    <h6 class="m-b-20 text-center">YouTube<span class="ml-4">Vimeo</span></h6>
                                    <div class="progress">
                                        <h5 class="m-r-20 m-b-0">59%</h5>
                                        <div class="progress-bar progress-c-theme2" role="progressbar" style="width: 30%; height:12px;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                                        <div class="progress-bar progress-c-theme" role="progressbar" style="width: 40%; height:12px;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                                        <h5 class="m-l-20 m-b-0">41%</h5>
                                    </div>
                                    <h6 class="m-t-20 text-center text-muted">2989<span class="m-l-15">2873</span></h6>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <h2 class="docs-header" id="page-table">Table</h2>
            <div class="row">
                <div class="col-xl-8 col-md-12 datta-example">
                    <div class="card User-Activity">
                        <div class="card-header">
                            <h5>User Activity</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block pb-0">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>User</th>
                                            <th>Activity</th>
                                            <th>Time</th>
                                            <th>Status</th>
                                            <th class="text-right"></th>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user">Ida Jorgensen</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-0">The quick brown fox</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-0">3:28 PM</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-0 text-c-green">Done</h6>
                                            </td>
                                            <td class="text-right"><i class="fas fa-circle text-c-green f-10"></i></td>
                                        </tr>

                                        <tr>
                                            <td>
                                                <h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="activity-user">Albert Andersen</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-0">Jumps over the lazy</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-0">2:37 PM</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-0 text-c-red">Missed</h6>
                                            </td>
                                            <td class="text-right"><i class="fas fa-circle text-c-red f-10"></i></td>
                                        </tr>

                                        <tr>
                                            <td>
                                                <h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-3.jpg" alt="activity-user">Silje Larsen</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-0">Dog the quick brown</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-0">10:23 AM</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-0 text-c-purple">Delayed</h6>
                                            </td>
                                            <td class="text-right"><i class="fas fa-circle text-c-purple f-10"></i></td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user">Ida Jorgensen</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-0">The quick brown fox</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-0">4:28 PM</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-0 text-c-green">Done</h6>
                                            </td>
                                            <td class="text-right"><i class="fas fa-circle text-c-green f-10"></i></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-12 m-b-30 datta-example">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Today</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">This Week</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">All</a>
                        </li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                            <div class="media friendlist-box align-items-center justify-content-center m-b-20">
                                <div class="m-r-10 photo-table">
                                    <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user"></a>
                                </div>
                                <div class="media-body">
                                    <h6 class="m-0 d-inline">Silje Larsen</h6>
                                    <span class="float-right d-flex align-items-center"><i class="fas fa-caret-up f-22 m-r-10 text-c-green"></i>3784</span>
                                </div>
                            </div>
                            <div class="media friendlist-box align-items-center justify-content-center m-b-20">
                                <div class="m-r-10 photo-table">
                                    <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="activity-user"></a>
                                </div>
                                <div class="media-body">
                                    <h6 class="m-0 d-inline">Julie Vad</h6>
                                    <span class="float-right d-flex align-items-center"><i class="fas fa-caret-up f-22 m-r-10 text-c-green"></i>3544</span>
                                </div>
                            </div>
                            <div class="media friendlist-box align-items-center justify-content-center m-b-20">
                                <div class="m-r-10 photo-table">
                                    <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-3.jpg" alt="activity-user"></a>
                                </div>
                                <div class="media-body">
                                    <h6 class="m-0 d-inline">Storm Hanse</h6>
                                    <span class="float-right d-flex align-items-center"><i class="fas fa-caret-down f-22 m-r-10 text-c-red"></i>2739</span>
                                </div>
                            </div>
                            <div class="media friendlist-box align-items-center justify-content-center m-b-20">
                                <div class="m-r-10 photo-table">
                                    <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user"></a>
                                </div>
                                <div class="media-body">
                                    <h6 class="m-0 d-inline">Frida Thomse</h6>
                                    <span class="float-right d-flex align-items-center"><i class="fas fa-caret-down f-22 m-r-10 text-c-red"></i>1032</span>
                                </div>
                            </div>
                            <div class="media friendlist-box align-items-center justify-content-center m-b-20">
                                <div class="m-r-10 photo-table">
                                    <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="activity-user"></a>
                                </div>
                                <div class="media-body">
                                    <h6 class="m-0 d-inline">Silje Larsen</h6>
                                    <span class="float-right d-flex align-items-center"><i class="fas fa-caret-up f-22 m-r-10 text-c-green"></i>8750</span>
                                </div>
                            </div>
                            <div class="media friendlist-box align-items-center justify-content-center">
                                <div class="m-r-10 photo-table">
                                    <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-3.jpg" alt="activity-user"></a>
                                </div>
                                <div class="media-body">
                                    <h6 class="m-0 d-inline">Storm Hanse</h6>
                                    <span class="float-right d-flex align-items-center"><i class="fas fa-caret-down f-22 m-r-10 text-c-red"></i>8750</span>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                            <div class="media friendlist-box align-items-center justify-content-center m-b-20">
                                <div class="m-r-10 photo-table">
                                    <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user"></a>
                                </div>
                                <div class="media-body">
                                    <h6 class="m-0 d-inline">Silje Larsen</h6>
                                    <span class="float-right d-flex align-items-center"><i class="fas fa-caret-up f-22 m-r-10 text-c-green"></i>3784</span>
                                </div>
                            </div>
                            <div class="media friendlist-box align-items-center justify-content-center m-b-20">
                                <div class="m-r-10 photo-table">
                                    <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="activity-user"></a>
                                </div>
                                <div class="media-body">
                                    <h6 class="m-0 d-inline">Julie Vad</h6>
                                    <span class="float-right d-flex align-items-center"><i class="fas fa-caret-up f-22 m-r-10 text-c-green"></i>3544</span>
                                </div>
                            </div>
                            <div class="media friendlist-box align-items-center justify-content-center m-b-20">
                                <div class="m-r-10 photo-table">
                                    <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-3.jpg" alt="activity-user"></a>
                                </div>
                                <div class="media-body">
                                    <h6 class="m-0 d-inline">Storm Hanse</h6>
                                    <span class="float-right d-flex align-items-center"><i class="fas fa-caret-down f-22 m-r-10 text-c-red"></i>2739</span>
                                </div>
                            </div>
                            <div class="media friendlist-box align-items-center justify-content-center m-b-20">
                                <div class="m-r-10 photo-table">
                                    <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user"></a>
                                </div>
                                <div class="media-body">
                                    <h6 class="m-0 d-inline">Frida Thomse</h6>
                                    <span class="float-right d-flex align-items-center"><i class="fas fa-caret-down f-22 m-r-10 text-c-red"></i>1032</span>
                                </div>
                            </div>
                            <div class="media friendlist-box align-items-center justify-content-center m-b-20">
                                <div class="m-r-10 photo-table">
                                    <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="activity-user"></a>
                                </div>
                                <div class="media-body">
                                    <h6 class="m-0 d-inline">Silje Larsen</h6>
                                    <span class="float-right d-flex align-items-center"><i class="fas fa-caret-up f-22 m-r-10 text-c-green"></i>8750</span>
                                </div>
                            </div>
                            <div class="media friendlist-box align-items-center justify-content-center">
                                <div class="m-r-10 photo-table">
                                    <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-3.jpg" alt="activity-user"></a>
                                </div>
                                <div class="media-body">
                                    <h6 class="m-0 d-inline">Storm Hanse</h6>
                                    <span class="float-right d-flex align-items-center"><i class="fas fa-caret-down f-22 m-r-10 text-c-red"></i>8750</span>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                            <div class="media friendlist-box align-items-center justify-content-center m-b-20">
                                <div class="m-r-10 photo-table">
                                    <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user"></a>
                                </div>
                                <div class="media-body">
                                    <h6 class="m-0 d-inline">Silje Larsen</h6>
                                    <span class="float-right d-flex align-items-center"><i class="fas fa-caret-up f-22 m-r-10 text-c-green"></i>3784</span>
                                </div>
                            </div>
                            <div class="media friendlist-box align-items-center justify-content-center m-b-20">
                                <div class="m-r-10 photo-table">
                                    <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="activity-user"></a>
                                </div>
                                <div class="media-body">
                                    <h6 class="m-0 d-inline">Julie Vad</h6>
                                    <span class="float-right d-flex align-items-center"><i class="fas fa-caret-up f-22 m-r-10 text-c-green"></i>3544</span>
                                </div>
                            </div>
                            <div class="media friendlist-box align-items-center justify-content-center m-b-20">
                                <div class="m-r-10 photo-table">
                                    <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-3.jpg" alt="activity-user"></a>
                                </div>
                                <div class="media-body">
                                    <h6 class="m-0 d-inline">Storm Hanse</h6>
                                    <span class="float-right d-flex align-items-center"><i class="fas fa-caret-down f-22 m-r-10 text-c-red"></i>2739</span>
                                </div>
                            </div>
                            <div class="media friendlist-box align-items-center justify-content-center m-b-20">
                                <div class="m-r-10 photo-table">
                                    <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user"></a>
                                </div>
                                <div class="media-body">
                                    <h6 class="m-0 d-inline">Frida Thomse</h6>
                                    <span class="float-right d-flex align-items-center"><i class="fas fa-caret-down f-22 m-r-10 text-c-red"></i>1032</span>
                                </div>
                            </div>
                            <div class="media friendlist-box align-items-center justify-content-center m-b-20">
                                <div class="m-r-10 photo-table">
                                    <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="activity-user"></a>
                                </div>
                                <div class="media-body">
                                    <h6 class="m-0 d-inline">Silje Larsen</h6>
                                    <span class="float-right d-flex align-items-center"><i class="fas fa-caret-up f-22 m-r-10 text-c-green"></i>8750</span>
                                </div>
                            </div>
                            <div class="media friendlist-box align-items-center justify-content-center">
                                <div class="m-r-10 photo-table">
                                    <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="activity-user"></a>
                                </div>
                                <div class="media-body">
                                    <h6 class="m-0 d-inline">Storm Hanse</h6>
                                    <span class="float-right d-flex align-items-center"><i class="fas fa-caret-up f-22 m-r-10 text-c-green"></i>8750</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12 col-md-12 datta-example">
                    <div class="card Application-list">
                        <div class="card-header">
                            <h5>Application list</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block pb-0">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>Image</th>
                                            <th>Application</th>
                                            <th>Installs</th>
                                            <th>Created</th>
                                            <th>Budget</th>
                                            <th>Status</th>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><img class="rounded-circle" style="width:50px;" src="assets/images/user/avatar-2.jpg" alt="activity-user"></td>
                                            <td>
                                                <h6 class="mb-1">Facebook</h6>
                                                <p class="m-0">Apple</p>
                                            </td>
                                            <td>
                                                <h6 class="mb-1">523.423</h6>
                                                <p class="text-c-green m-0">+ 84 Daily</p>
                                            </td>
                                            <td>
                                                <h6 class="m-b-0">Feb 11 2017</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-b-0">$ 16,244</h6>
                                            </td>
                                            <td><a class="text-white label theme-bg f-12" href="#!">Active</a></td>
                                        </tr>

                                        <tr>
                                            <td><img class="rounded-circle" style="width:50px;" src="assets/images/user/avatar-1.jpg" alt="activity-user"></td>
                                            <td>
                                                <h6 class="mb-1">Twitter</h6>
                                                <p class="m-0">CS Form</p>
                                            </td>
                                            <td>
                                                <h6 class="mb-1">7.239</h6>
                                                <p class="text-muted m-0">+ 5 Daily</p>
                                            </td>
                                            <td>
                                                <h6 class="m-b-0">Jan 19 2017</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-b-0">$ 3,937</h6>
                                            </td>
                                            <td><a class="label theme-bg2 f-12 text-white" href="#!">Not Active</a></td>
                                        </tr>

                                        <tr>
                                            <td><img class="rounded-circle" style="width:50px;" src="assets/images/user/avatar-3.jpg" alt="activity-user"></td>
                                            <td>
                                                <h6 class="mb-1">Instagram</h6>
                                                <p class="m-0">Microsoft</p>
                                            </td>
                                            <td>
                                                <h6 class="mb-1">5.877</h6>
                                                <p class="text-c-green m-0">+ 12 Daily</p>
                                            </td>
                                            <td>
                                                <h6 class="m-b-0">Aug 04 2017</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-b-0">$ 28,039</h6>
                                            </td>
                                            <td><a class="label bg-c-blue f-12 text-white" href="#!">Paused</a></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-8 col-md-12 datta-example">
                    <div class="card user-list">
                        <div class="card-header">
                            <h5>User Project List</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block pb-0">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>User</th>
                                            <th>project</th>
                                            <th>Completed</th>
                                            <th>Status</th>
                                            <th>Date</th>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user"></td>
                                            <td>
                                                <h6 class="mb-1">Social Media App</h6>
                                                <p class="m-0">Assigned to<span class="text-c-green"> Tristan Madsen</span></p>
                                            </td>
                                            <td><span class="pie_1">326,134</span></td>
                                            <td>
                                                <h6 class="m-0">68%</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-0">October 26, 2017</h6>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="activity-user"></td>
                                            <td>
                                                <h6 class="mb-1">Newspaper Wordpress Web</h6>
                                                <p class="m-0">Assigned to<span class="text-c-green"> Marcus Poulsen</span></p>
                                            </td>
                                            <td><span class="pie_2">110,134</span></td>
                                            <td>
                                                <h6 class="m-0">46%</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-0">September 4, 2017</h6>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-3.jpg" alt="activity-user"></td>
                                            <td>
                                                <h6 class="mb-1">Dashboard UI Kit Design</h6>
                                                <p class="m-0">Assigned to<span class="text-c-green"> Felix Johansen</span></p>
                                            </td>
                                            <td><span class="pie_3">226,134</span></td>
                                            <td>
                                                <h6 class="m-0">31%</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-0">November 14, 2017</h6>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user"></td>
                                            <td>
                                                <h6 class="mb-1">Social Media App</h6>
                                                <p class="m-0">Assigned to<span class="text-c-green"> Tristan Madsen</span></p>
                                            </td>
                                            <td><span class="pie_4">500,134</span></td>
                                            <td>
                                                <h6 class="m-0">85%</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-0">December 14, 2017</h6>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-12 m-b-30 datta-example">
                    <ul class="nav nav-tabs" id="myTab1" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="user-tab" data-toggle="tab" href="#user" role="tab" aria-controls="home" aria-selected="true">Developer</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="designer-tab" data-toggle="tab" href="#designer" role="tab" aria-controls="profile" aria-selected="false">Designer</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="Developer-tab" data-toggle="tab" href="#Developer" role="tab" aria-controls="contact" aria-selected="false">All</a>
                        </li>
                    </ul>
                    <div class="tab-content User-Lists" id="myTabContent1">
                        <div class="tab-pane fade show active" id="user" role="tabpanel" aria-labelledby="user-tab">
                            <div class="widget-timeline m-b-25">
                                <div class="media">
                                    <div class="mr-3 photo-table">
                                        <i class="fas fa-circle text-c-green f-10 m-r-10"></i>
                                        <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="chat-user"></a>
                                    </div>
                                    <div class="media-body">
                                        <h6 class="d-inline-block">The Quick Brown Fox Jumps</h6>
                                        <p class="m-b-0 text-muted">Lorem Ipsum is simply dummy text of…</p>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-timeline m-b-25">
                                <div class="media">
                                    <div class="mr-3 photo-table">
                                        <i class="fas fa-circle text-c-yellow f-10 m-r-10"></i>
                                        <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="chat-user"></a>
                                    </div>
                                    <div class="media-body">
                                        <h6 class="d-inline-block">Over The Lazy Dog</h6>
                                        <p class="m-b-0 text-muted">Lorem Ipsum is simply dummy text of…</p>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-timeline m-b-25">
                                <div class="media">
                                    <div class="mr-3 photo-table">
                                        <i class="fas fa-circle text-c-purple f-10 m-r-10"></i>
                                        <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-3.jpg" alt="chat-user"></a>
                                    </div>
                                    <div class="media-body">
                                        <h6 class="d-inline-block">The Quick Brown Fox</h6>
                                        <p class="m-b-0 text-muted">Lorem Ipsum is simply dummy text of…</p>

                                    </div>
                                </div>
                            </div>
                            <div class="widget-timeline">
                                <div class="media">
                                    <div class="mr-3 photo-table">
                                        <i class="fas fa-circle text-c-blue f-10 m-r-10"></i>
                                        <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="chat-user"></a>
                                    </div>
                                    <div class="media-body">
                                        <h6 class="d-inline-block">The Quick Brown Fox Jumps</h6>
                                        <p class="m-b-0 text-muted">Lorem Ipsum is simply dummy text of…</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="designer" role="tabpanel" aria-labelledby="designer-tab">
                            <div class="widget-timeline m-b-25">
                                <div class="media">
                                    <div class="mr-3 photo-table">
                                        <i class="fas fa-circle text-c-blue f-10 m-r-10"></i>
                                        <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="chat-user"></a>
                                    </div>
                                    <div class="media-body">
                                        <h6 class="d-inline-block">The Quick Brown Fox Jumps</h6>
                                        <p class="m-b-0 text-muted">Lorem Ipsum is simply dummy text of…</p>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-timeline m-b-25">
                                <div class="media">
                                    <div class="mr-3 photo-table">
                                        <i class="fas fa-circle text-c-purple f-10 m-r-10"></i>
                                        <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-3.jpg" alt="chat-user"></a>
                                    </div>
                                    <div class="media-body">
                                        <h6 class="d-inline-block">The Quick Brown Fox</h6>
                                        <p class="m-b-0 text-muted">Lorem Ipsum is simply dummy text of…</p>

                                    </div>
                                </div>
                            </div>
                            <div class="widget-timeline m-b-25">
                                <div class="media">
                                    <div class="mr-3 photo-table">
                                        <i class="fas fa-circle text-c-yellow f-10 m-r-10"></i>
                                        <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="chat-user"></a>
                                    </div>
                                    <div class="media-body">
                                        <h6 class="d-inline-block">Over The Lazy Dog</h6>
                                        <p class="m-b-0 text-muted">Lorem Ipsum is simply dummy text of…</p>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-timeline">
                                <div class="media">
                                    <div class="mr-3 photo-table">
                                        <i class="fas fa-circle text-c-green f-10 m-r-10"></i>
                                        <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="chat-user"></a>
                                    </div>
                                    <div class="media-body">
                                        <h6 class="d-inline-block">The Quick Brown Fox Jumps</h6>
                                        <p class="m-b-0 text-muted">Lorem Ipsum is simply dummy text of…</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="Developer" role="tabpanel">
                            <div class="widget-timeline m-b-25">
                                <div class="media">
                                    <div class="mr-3 photo-table">
                                        <i class="fas fa-circle text-c-blue f-10 m-r-10"></i>
                                        <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-3.jpg" alt="chat-user"></a>
                                    </div>
                                    <div class="media-body">
                                        <h6 class="d-inline-block">The Quick Brown Fox</h6>
                                        <p class="m-b-0 text-muted">Lorem Ipsum is simply dummy text of…</p>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-timeline m-b-25">
                                <div class="media">
                                    <div class="mr-3 photo-table">
                                        <i class="fas fa-circle text-c-purple f-10 m-r-10"></i>
                                        <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="chat-user"></a>
                                    </div>
                                    <div class="media-body">
                                        <h6 class="d-inline-block">The Quick Brown Fox Jumps</h6>
                                        <p class="m-b-0 text-muted">Lorem Ipsum is simply dummy text of…</p>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-timeline m-b-25">
                                <div class="media">
                                    <div class="mr-3 photo-table">
                                        <i class="fas fa-circle text-c-green f-10 m-r-10"></i>
                                        <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="chat-user"></a>
                                    </div>
                                    <div class="media-body">
                                        <h6 class="d-inline-block">The Quick Brown Fox Jumps</h6>
                                        <p class="m-b-0 text-muted">Lorem Ipsum is simply dummy text of…</p>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-timeline">
                                <div class="media">
                                    <div class="mr-3 photo-table">
                                        <i class="fas fa-circle text-c-yellow f-10 m-r-10"></i>
                                        <a href="#!"><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="chat-user"></a>
                                    </div>
                                    <div class="media-body">
                                        <h6 class="d-inline-block">Over The Lazy Dog</h6>
                                        <p class="m-b-0 text-muted">Lorem Ipsum is simply dummy text of…</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12 col-md-12 datta-example">
                    <div class="card code-table">
                        <div class="card-header">
                            <h5>Full Width Table</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>

                                </div>
                            </div>
                        </div>
                        <div class="card-block pb-0">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>Id Number</th>
                                            <th>Code</th>
                                            <th>Date</th>
                                            <th>Budget</th>
                                            <th>Status</th>
                                            <th class="text-right">Ratings</th>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <h6 class="mb-1">#467</h6>
                                            </td>
                                            <td>
                                                <h6 class="mb-1">8765482</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-b-0">November 14, 2017</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-b-0">$ 874.23</h6>
                                            </td>
                                            <td><a href="#!" class="label theme-bg f-12 text-white">Active</a></td>
                                            <td class="text-right"><a href="#!"><i class="fa fa-star f-18 text-c-yellow"></i></a>
                                                <a href="#!"><i class="fa fa-star f-18 text-c-yellow"></i></a>
                                                <a href="#!"><i class="fa fa-star f-18 text-c-yellow"></i></a>
                                                <a href="#!"><i class="fa fa-star f-18 text-c-yellow"></i></a>
                                                <a href="#!"><i class="fa fa-star f-18 text-black-50"></i></a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                <h6 class="mb-1">#466</h6>
                                            </td>
                                            <td>
                                                <h6 class="mb-1">2366482</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-b-0">November 13, 2017</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-b-0">$ 235.34</h6>
                                            </td>
                                            <td><a href="#!" class="label theme-bg2 f-12 text-white">Not Active</a></td>
                                            <td class="text-right"><a href="#!"><i class="fa fa-star f-18 text-c-yellow"></i></a>
                                                <a href="#!"><i class="fa fa-star f-18 text-c-yellow"></i></a>
                                                <a href="#!"><i class="fa fa-star f-18 text-c-yellow"></i></a>
                                                <a href="#!"><i class="fa fa-star f-18 text-black-50"></i></a>
                                                <a href="#!"><i class="fa fa-star f-18 text-black-50"></i></a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                <h6 class="mb-1">#465</h6>
                                            </td>
                                            <td>
                                                <h6 class="mb-1">8832638</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-b-0">October 14, 2017</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-b-0">$ 233.46</h6>
                                            </td>
                                            <td><a href="#!" class="label theme-bg f-12 text-white">Active</a></td>
                                            <td class="text-right"><a href="#!"><i class="fa fa-star f-18 text-c-yellow"></i></a>
                                                <a href="#!"><i class="fa fa-star f-18 text-c-yellow"></i></a>
                                                <a href="#!"><i class="fa fa-star f-18 text-black-50"></i></a>
                                                <a href="#!"><i class="fa fa-star f-18 text-black-50"></i></a>
                                                <a href="#!"><i class="fa fa-star f-18 text-black-50"></i></a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <h6 class="mb-1">#464</h6>
                                            </td>
                                            <td>
                                                <h6 class="mb-1">9632638</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-b-0">December 17, 2017</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-b-0">$ 133.46</h6>
                                            </td>
                                            <td><a href="#!" class="label theme-bg2 f-12 text-white">Not Active</a></td>
                                            <td class="text-right"><a href="#!"><i class="fa fa-star f-18 text-c-yellow"></i></a>
                                                <a href="#!"><i class="fa fa-star f-18 text-black-50"></i></a>
                                                <a href="#!"><i class="fa fa-star f-18 text-black-50"></i></a>
                                                <a href="#!"><i class="fa fa-star f-18 text-black-50"></i></a>
                                                <a href="#!"><i class="fa fa-star f-18 text-black-50"></i></a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <h6 class="mb-1">#463</h6>
                                            </td>
                                            <td>
                                                <h6 class="mb-1">3332538</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-b-0">July 14, 2017</h6>
                                            </td>
                                            <td>
                                                <h6 class="m-b-0">$ 244.46</h6>
                                            </td>
                                            <td><a href="#!" class="label theme-bg f-12 text-white">Active</a></td>
                                            <td class="text-right"><a href="#!"><i class="fa fa-star f-18 text-c-yellow"></i></a>
                                                <a href="#!"><i class="fa fa-star f-18 text-c-yellow"></i></a>
                                                <a href="#!"><i class="fa fa-star f-18 text-c-yellow"></i></a>
                                                <a href="#!"><i class="fa fa-star f-18 text-black-50"></i></a>
                                                <a href="#!"><i class="fa fa-star f-18 text-black-50"></i></a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 datta-example">
                    <div class="card Recent-Users">
                        <div class="card-header">
                            <h5>Recent Users</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <tbody>
                                        <tr class="unread">
                                            <td><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user"></td>
                                            <td>
                                                <h6 class="mb-1">Isabella Christensen</h6>
                                                <p class="m-0">Lorem Ipsum is simply dummy text of…</p>
                                            </td>
                                            <td>
                                                <h6 class="text-muted"><i class="fas fa-circle text-c-green f-10 m-r-15"></i>11 MAY 12:56</h6>
                                            </td>
                                            <td><a href="#!" class="label theme-bg2 text-white f-12">Reject</a><a href="#!" class="label theme-bg text-white f-12">Approve</a></td>
                                        </tr>
                                        <tr class="unread">
                                            <td><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="activity-user"></td>
                                            <td>
                                                <h6 class="mb-1">Mathilde Andersen</h6>
                                                <p class="m-0">Lorem Ipsum is simply dummy text of…</p>
                                            </td>
                                            <td>
                                                <h6 class="text-muted"><i class="fas fa-circle text-c-red f-10 m-r-15"></i>11 MAY 10:35</h6>
                                            </td>
                                            <td><a href="#!" class="label theme-bg2 text-white f-12">Reject</a><a href="#!" class="label theme-bg text-white f-12">Approve</a></td>
                                        </tr>
                                        <tr class="unread">
                                            <td><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-3.jpg" alt="activity-user"></td>
                                            <td>
                                                <h6 class="mb-1">Karla Sorensen</h6>
                                                <p class="m-0">Lorem Ipsum is simply dummy text of…</p>
                                            </td>
                                            <td>
                                                <h6 class="text-muted"><i class="fas fa-circle text-c-green f-10 m-r-15"></i>9 MAY 17:38</h6>
                                            </td>
                                            <td><a href="#!" class="label theme-bg2 text-white f-12">Reject</a><a href="#!" class="label theme-bg text-white f-12">Approve</a></td>
                                        </tr>
                                        <tr class="unread">
                                            <td><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user"></td>
                                            <td>
                                                <h6 class="mb-1">Ida Jorgensen</h6>
                                                <p class="m-0">Lorem Ipsum is simply dummy text of…</p>
                                            </td>
                                            <td>
                                                <h6 class="text-muted f-w-300"><i class="fas fa-circle text-c-red f-10 m-r-15"></i>19 MAY 12:56</h6>
                                            </td>
                                            <td><a href="#!" class="label theme-bg2 text-white f-12">Reject</a><a href="#!" class="label theme-bg text-white f-12">Approve</a></td>
                                        </tr>
                                        <tr class="unread">
                                            <td><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="activity-user"></td>
                                            <td>
                                                <h6 class="mb-1">Albert Andersen</h6>
                                                <p class="m-0">Lorem Ipsum is simply dummy text of…</p>
                                            </td>
                                            <td>
                                                <h6 class="text-muted"><i class="fas fa-circle text-c-green f-10 m-r-15"></i>21 July 12:56</h6>
                                            </td>
                                            <td><a href="#!" class="label theme-bg2 text-white f-12">Reject</a><a href="#!" class="label theme-bg text-white f-12">Approve</a></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <h2 class="docs-header" id="page-user">User</h2>
            <div class="row">
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <img class="img-fluid" src="assets/images/widget/dashborad-1.jpg" alt="dashboard-user">
                        <div class="card-block">
                            <h5>Dashboard UI Kit</h5>
                            <span class="text-muted">By Creative Studio Form</span>
                            <div class="row m-t-30">
                                <div class="col-6 p-r-0">
                                    <a href="#!" class="btn btn-primary text-uppercase btn-block">add friend</a>
                                </div>
                                <div class="col-6">
                                    <a href="#!" class="btn text-uppercase border btn-block btn-outline-secondary">message</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-block">
                            <img class="img-fluid" style="width:100%;" src="assets/images/widget/dashborad-2.jpg" alt="dashboard-user">
                            <h5 class="m-t-35">Dashboard UI Kit</h5>
                            <span class="text-muted">By Creative Studio Form</span>
                            <p class="border-top m-b-20 p-t-10 m-t-20"></p>
                            <div class="row">
                                <div class="col">
                                    <h5>$ 5236.42</h5>
                                    <span>BUDGET</span>
                                </div>
                                <div class="col">
                                    <h5>9 May 2017</h5>
                                    <span>DEADLINE</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-12 datta-example">
                    <div class="card">
                        <div class="card-block">
                            <img class="img-fluid" style="width:100%;" src="assets/images/widget/dashborad-3.jpg" alt="dashboard-user">
                            <h5 class="m-t-35">Dashboard UI Kit</h5>
                            <span class="text-muted d-block m-b-30">By Creative Studio Form</span>
                            <h6 class="m-b-0">$ 2356.23 <span class="float-right">$ 3200.00</span></h6>
                            <div class="progress m-t-10" style="height: 7px;">
                                <div class="progress-bar progress-c-theme" role="progressbar" style="width: 69%;" aria-valuenow="69" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="row m-t-30">
                                <div class="col-6 p-r-0">
                                    <a href="#!" class="btn btn-primary text-uppercase btn-block">add friend</a>
                                </div>
                                <div class="col-6">
                                    <a href="#!" class="btn text-uppercase border btn-block btn-outline-secondary">message</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-block">
                            <div class="row align-items-center justify-content-center">
                                <div class="col-auto">
                                    <img class="img-fluid" src="assets/images/widget/dashborad-5.jpg" alt="dashboard-user">
                                </div>

                                <div class="col">
                                    <h5 class="mb-3">Dashboard UI Kit</h5>
                                    <h6 class="m-b-0">$ 2356.23 <span class="float-right">$ 32</span></h6>
                                    <div class="progress m-t-10" style="height: 7px;">
                                        <div class="progress-bar progress-c-theme" role="progressbar" style="width: 69%;" aria-valuenow="69" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card">
                        <div class="row align-items-center justify-content-center">
                            <div class="col-auto">
                                <img class="img-fluid" src="assets/images/widget/dashborad-4.jpg" alt="dashboard-user">
                            </div>
                            <div class="col p-l-0">
                                <h4>$ 59,48 <i class="fas fa-caret-up text-c-green f-22 m-l-5"></i></h4>
                                <span>EARNINGS</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-12 datta-example">
                    <div class="card">
                        <div class="card-block">
                            <div class="row align-items-center justify-content-center">
                                <div class="col-auto">
                                    <img class="img-fluid" src="assets/images/widget/dashborad-5.jpg" alt="dashboard-user">
                                </div>

                                <div class="col">
                                    <h5 class="mb-3">Dashboard UI Kit</h5>
                                    <h6 class="m-b-0">$ 2463.23 <span class="float-right">$ 64</span></h6>
                                    <div class="progress m-t-10" style="height:7px;">
                                        <div class="progress-bar progress-c-theme2" role="progressbar" style="width:40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card dashboard-kit">
                        <div class="card-block">
                            <h5>Dashboard UI Kit</h5>
                            <span class="text-muted">By Creative Studio Form</span>
                            <img class="img-fluid mt-4" style="width:100%;" src="assets/images/widget/dashborad-1.jpg" alt="dashboard-user">
                            <ul class="design-image">
                                <li>
                                    <button class="btn bg-muted"><i class="fas fa-plus f-14 mr-0"></i></button>
                                </li>
                                <li><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="chat-user"></li>
                                <li><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="chat-user"></li>
                                <li><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-3.jpg" alt="chat-user"></li>
                                <li class="text-muted">+63</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header borderless">
                            <h5 class="mb-2">Post with emoticons</h5>
                            <span class="text-muted d-block">May 12, 2017</span>
                        </div>
                        <div class="card-block post-emoticon">
                            <img class="img-fluid" style="width:100%;" src="assets/images/widget/emoticon.jpg" alt="dashboard-user">
                            <ul>
                                <li class="m-r-25"><i class="far fa-smile f-26 text-c-green m-r-10"></i>235</li>
                                <li class="m-r-25"><i class="far fa-smile f-26 text-c-purple m-r-10"></i>95</li>
                                <li class="m-r-0"><i class="far fa-smile f-26 text-c-red m-r-10"></i>18</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-12 datta-example">
                    <div class="card">
                        <div class="card-block p-0">
                            <img class="img-fluid" style="width:100%;" src="assets/images/widget/dashborad-2.jpg" alt="dashboard-user">
                            <div class="ux-designer">
                                <button class="btn btn-primary"><i class="fas fa-plus f-14 mr-0"></i></button>
                                <h5>Alma Christensen</h5>
                                <span>UX Designer</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card theme-bg visa-top">
                        <div class="card-header borderless">
                            <h5 class="text-white float-left">Villads Johansen</h5>
                            <img class="img-fluid float-right" src="assets/images/widget/master-logo.png" alt="visa-logo">
                        </div>
                        <div class="card-block visa">
                            <h6 class="f-w-600 text-white">NOT VALID <span class="f-w-300 m-l-10">10/17</span></h6>
                            <h3 class="f-w-300 text-white m-t-25 m-b-0">5635 2489 8596 3445</h3>
                            <span class="text-white">1025</span>
                            <img class="img-fluid" src="assets/images/widget/master-background.png" alt="master-background">
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card theme-bg2 visa-top">
                        <div class="card-header borderless">
                            <h5 class="text-white float-left">John Doe</h5>
                            <img class="img-fluid float-right" src="assets/images/widget/visa-logo.png" alt="visa-logo">
                        </div>
                        <div class="card-block visa">
                            <h6 class="f-w-600 text-white">VALID <span class="f-w-300 m-l-10">05/17</span></h6>
                            <h3 class="f-w-300 text-white m-t-25 m-b-0">4883 2359 9932 3445</h3>
                            <span class="text-white">5346</span>
                            <img class="img-fluid" src="assets/images/widget/visa-background.png" alt="visa-background">
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-12 datta-example">
                    <div class="card bg-c-blue visa-top">
                        <div class="card-header borderless">
                            <h5 class="text-white float-left">Silje Larsen</h5>
                            <img class="img-fluid float-right" src="assets/images/widget/rupay-logo.png" alt="visa-logo">
                        </div>
                        <div class="card-block visa">
                            <h6 class="f-w-600 text-white">VALID <span class="f-w-300 m-l-10">09/18</span></h6>
                            <h3 class="f-w-300 text-white m-t-25 m-b-0">7895 2359 1534 6548</h3>
                            <span class="text-white">7852</span>
                            <img class="img-fluid" src="assets/images/widget/rupay-background.png" alt="rupay-background">
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card loction-user">
                        <div class="card-block p-0">
                            <div class="row align-items-center justify-content-center">
                                <div class="col-auto">
                                    <img class="img-fluid rounded-circle" style="width:80px;" src="assets/images/user/avatar-3.jpg" alt="dashboard-user">
                                </div>
                                <div class="col">
                                    <h5>Villads Johansen</h5>
                                    <span><i class="fas fa-map-marker-alt f-18 m-r-5"></i> Berlin, Germany</span>
                                </div>
                            </div>
                            <div class="border-top"></div>
                            <div class="loction-progress">
                                <h6 class="m-b-10">Twitter<span class="float-right">Google +</span></h6>
                                <div class="progress">
                                    <div class="progress-bar progress-c-theme2" role="progressbar" style="width: 30%; height:10px;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                                    <div class="progress-bar progress-c-theme" role="progressbar" style="width: 30%; height:10px;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <h5 class="f-w-300 m-t-20 text-muted">62%<span class="float-right">28%</span></h5>
                                <h6 class="m-b-10 m-t-20">Facebook <span class="float-right">Youtube</span></h6>
                                <div class="progress">
                                    <div class="progress-bar progress-c-theme2" role="progressbar" style="width: 40%; height:10px;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                                    <div class="progress-bar progress-c-theme" role="progressbar" style="width: 30%; height:10px;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <h5 class="f-w-300 m-t-20 text-muted">60%<span class="float-right">40%</span></h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-block">
                            <div class="text-center m-b-30">
                                <img class="img-fluid rounded-circle" src="assets/images/user/avatar-2.jpg" alt="dashboard-user">
                                <h5 class="mt-3">Mille Jensen</h5>
                                <span class="d-block">Ninja Level 14</span>
                            </div>
                            <h6 class=" m-b-0">754 Points <span class="float-right">1000</span></h6>
                            <div class="progress m-t-10" style="height:7px;">
                                <div class="progress-bar progress-c-theme" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="row m-t-30">
                                <div class="col-6 p-r-0">
                                    <a href="#!" class="btn btn-primary text-uppercase btn-block">add friend</a>
                                </div>
                                <div class="col-6">
                                    <a href="#!" class="btn text-uppercase border btn-block btn-outline-secondary">message</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card user-designer">
                        <div class="card-block text-center">
                            <h5>Alma Christensen</h5>
                            <span class="d-block mb-4">UX Designer</span>
                            <img class="img-fluid rounded-circle" style="width:70px;" src="assets/images/user/avatar-2.jpg" alt="dashboard-user">
                            <div class="row m-t-30">
                                <div class="col-md-4 col-6">
                                    <h5>974</h5>
                                    <span class="text-muted">IMAGES</span>
                                </div>
                                <div class="col-md-4 col-6">
                                    <h5>35.7k</h5>
                                    <span class="text-muted">LIKES</span>
                                </div>
                                <div class="col-md-4 col-12">
                                    <h5>236</h5>
                                    <span class="text-muted">FOLLOW</span>
                                </div>
                            </div>
                            <div class="designer m-t-30">
                                <a href="#!" class="btn btn-primary shadow-2 text-uppercase btn-block">add friend</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card Design-sprint theme-bg2">
                        <div class="card-header borderless">
                            <h5 class="text-white">Project Design Sprint</h5>
                            <span class="d-block text-white mt-3 f-w-300">11 MAY 10:35</span>
                        </div>
                        <div class="card-block">
                            <p class="text-white f-w-300">Lorem Ipsum is simply dummy text of the printing and typesetting industry.....</p>
                            <p class="text-white f-w-300">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s..</p>
                            <ul class="design-image">
                                <li>
                                    <button class="btn bg-white"><i class="fas fa-plus f-14 mr-0"></i></button>
                                </li>
                                <li><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="chat-user"></li>
                                <li><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="chat-user"></li>
                                <li><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-3.jpg" alt="chat-user"></li>
                                <li class="text-white">+63</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-block">
                            <div class="row align-items-center justify-content-center">
                                <div class="col-auto">
                                    <img class="img-fluid rounded-circle" style="width:70px;" src="assets/images/user/avatar-2.jpg" alt="dashboard-user">
                                </div>
                                <div class="col">
                                    <h5>Alma Christensen</h5>
                                    <span>UX Designer</span>
                                </div>
                            </div>
                            <ul class="rask-list">
                                <li>
                                    <i class="task-icon bg-c-green"></i>
                                    <h6>Anton Knudsen<span class="float-right text-muted">14 MAY</span></h6>
                                    <p class="text-muted">Lorem ipsum is dolorem…</p>
                                </li>
                                <li>
                                    <i class="task-icon bg-c-green"></i>
                                    <h6>Anton Knudsen<span class="float-right text-muted">14 MAY</span></h6>
                                    <p class="text-muted">Lorem ipsum is dolorem…</p>
                                </li>
                                <li>
                                    <i class="task-icon bg-c-green"></i>
                                    <h6>Anton Knudsen<span class="float-right text-muted">14 MAY</span></h6>
                                    <p class="text-muted">Lorem ipsum is dolorem…</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-block p-0">
                            <div class="text-center project-main">
                                <img class="img-fluid rounded-circle" src="assets/images/user/avatar-3.jpg" alt="dashboard-user">
                                <h5 class="mt-4">Alma Christensen</h5>
                                <span>UX Designer</span>
                                <div class="row m-t-30">
                                    <div class="col-6 p-r-0">
                                        <a href="#!" class="btn btn-primary  text-uppercase btn-block">add friend</a>
                                    </div>
                                    <div class="col-6">
                                        <a href="#!" class="btn text-uppercase border btn-block btn-outline-secondary">message</a>
                                    </div>
                                </div>
                            </div>
                            <div class="border-top"></div>
                            <div class="project-main">
                                <div class="row text-center">
                                    <div class="col-md-4 col-6">
                                        <h6 class="text-muted"><i class="fas fa-star m-r-5"></i> 4.8</h6>
                                    </div>
                                    <div class="col-md-4 col-6">
                                        <h6 class="text-muted"><i class="fas fa-map-marker-alt m-r-5"></i>USA</h6>
                                    </div>
                                    <div class="col-md-4 col-12">
                                        <h6 class="text-muted m-0"><i class="fas fa-file-alt m-r-5"></i> 28 Task</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <h2 class="docs-header" id="page-amchart">Am chart</h2>
            <div class="row">
                <div class="col-xl-4 col-md-12 datta-example">
                    <div class="card card-command">
                        <div class="card-header">
                            <h5><i class="card-icon far fa-comment f-16 m-r-5"></i>command</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div id="command-card-chart1" style="height:250px"></div>
                        <div class="card-block">
                            <div class="comment-bar">
                                <h6 class="text-uppercase text-muted">commenters<span class="text-uppercase float-right">view all</span></h6>
                                <div class="row align-items-center justify-content-center mt-4">
                                    <div class="col">
                                        <h6 class="mb-0"><img class="rounded-circle mr-2 ml-2" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="activity-user text-uppercase"><span class="d-block d-sm-inline-block m-t-10">Ida Jorgensen</span></h6>
                                    </div>
                                    <div class="col-auto text-right">
                                        <span class="float-right f-14">3 comments</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var chartDatam = [{
                                "year": "1999",
                                "value": 30
                            }, {
                                "year": "2000",
                                "value": 55
                            }, {
                                "year": "2001",
                                "value": 80
                            }, {
                                "year": "2002",
                                "value": 60
                            }, {
                                "year": "2003",
                                "value": 100
                            }, {
                                "year": "2004",
                                "value": 70
                            }];
                            var chartm = AmCharts.makeChart("command-card-chart1", {
                                "type": "serial",
                                "addClassNames": true,
                                "defs": {
                                    "filter": [{
                                            "x": "-50%",
                                            "y": "-50%",
                                            "width": "200%",
                                            "height": "200%",
                                            "id": "blur",
                                            "feGaussianBlur": {
                                                "in": "SourceGraphic",
                                                "stdDeviation": "30"
                                            }
                                        },
                                        {
                                            "id": "shadow",
                                            "x": "-10%",
                                            "y": "-10%",
                                            "width": "120%",
                                            "height": "120%",
                                            "feOffset": {
                                                "result": "offOut",
                                                "in": "SourceAlpha",
                                                "dx": "0",
                                                "dy": "20"
                                            },
                                            "feGaussianBlur": {
                                                "result": "blurOut",
                                                "in": "offOut",
                                                "stdDeviation": "10"
                                            },
                                            "feColorMatrix": {
                                                "result": "blurOut",
                                                "type": "matrix",
                                                "values": "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .2 0"
                                            },
                                            "feBlend": {
                                                "in": "SourceGraphic",
                                                "in2": "blurOut",
                                                "mode": "normal"
                                            }
                                        }
                                    ]
                                },
                                "fontSize": 15,
                                "dataProvider": chartDatam,
                                "dataDateFormat": "YYYY",
                                "autoMarginOffset": 0,
                                "marginRight": 0,
                                "categoryField": "year",
                                "categoryAxis": {
                                    "color": '#fff',
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "lineAlpha": 0,
                                    "offset": -20,
                                    "inside": true,
                                    "parseDates": true,
                                    "minPeriod": "YYYY"
                                },
                                "chartCursor": {
                                    "valueLineEnabled": false,
                                    "valueLineBalloonEnabled": false,
                                    "cursorAlpha": 0,
                                    "zoomable": false,
                                    "cursorColor": "#fff",
                                    "categoryBalloonColor": "#1de9b6",
                                    "valueZoomable": false,
                                    "valueLineAlpha": 0
                                },
                                "valueAxes": [{
                                    "fontSize": 0,
                                    "inside": true,
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "lineAlpha": 0,
                                    "minimum": 0,
                                    "maximum": 150,
                                }],
                                "graphs": [{
                                    "id": "g1",
                                    "type": "line",
                                    "valueField": "value",
                                    "type": "smoothedLine",
                                    "lineColor": '#1de9b6',
                                    "fillColors": [
                                        "#1de9b6",
                                        "#fff",
                                        "#fff"
                                    ],
                                    "lineAlpha": 1,
                                    "lineThickness": 5,
                                    "fillAlphas": 0.3,
                                    "showBalloon": true,
                                    "balloon": {
                                        "drop": true,
                                        "adjustBorderColor": false,
                                        "color": "#ffffff",
                                        "fillAlphas": 0.2,
                                        "bullet": "round",
                                        "bulletBorderAlpha": 1,
                                        "bulletSize": 5,
                                        "hideBulletsCount": 50,
                                        "lineThickness": 2,
                                        "useLineColorForBulletBorder": true,
                                        "valueField": "value",
                                        "balloonText": "<span style='font-size:18px;'>[[value]]</span>"
                                    },
                                }],
                            });
                            setTimeout(function() {
                                chartm.zoomToIndexes(1, chartDatam.length - 2);
                            }, 400);
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Sales</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div id="chart-sale" class="chart-sale" style="width:220px;height:220px;"> </div>
                            <div class="row text-center mt-3">
                                <div class="col-sm-12">
                                    <h3 class="f-w-300">184</h3>
                                    <span class="text-uppercase">12 Today</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var chart = AmCharts.makeChart("chart-sale", {
                                "type": "pie",
                                "theme": "light",
                                "dataProvider": [{
                                    "title": "Max",
                                    "value": 500,
                                    "color": "#1de9b6"
                                }, {
                                    "title": "Min",
                                    "value": 237,
                                    "color": "#fff"
                                }],
                                "titleField": "title",
                                "valueField": "value",
                                "colorField": "color",
                                "labelRadius": 5,
                                "radius": "42%",
                                "innerRadius": "91%",
                                "labelText": "",
                                "balloon": {
                                    "fixedPosition": true
                                },
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Statistics</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div id="Stack-bar" class="Stackchart" style="height:300px;">
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var chart = AmCharts.makeChart("Stack-bar", {
                                "type": "serial",
                                "theme": "light",
                                "dataProvider": [{
                                    "year": "Jan",
                                    "visits": 10,
                                    "color": ["#1de9b6", "#1dc4e9"]
                                }, {
                                    "year": "Feb",
                                    "visits": 13,
                                    "color": ["#1de9b6", "#1dc4e9"]
                                }, {
                                    "year": "Mar",
                                    "visits": 20,
                                    "color": ["#1de9b6", "#1dc4e9"]
                                }, {
                                    "year": "Apr",
                                    "visits": 28,
                                    "color": ["#1de9b6", "#1dc4e9"]
                                }, {
                                    "year": "May",
                                    "visits": 25,
                                    "color": ["#1de9b6", "#1dc4e9"]
                                }, {
                                    "year": "Jun",
                                    "visits": 4,
                                    "color": ["#1de9b6", "#1dc4e9"]
                                }],
                                "valueAxes": [{
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "lineAlpha": 0,
                                    "fontSize": 0,
                                }],
                                "startDuration": 1,
                                "graphs": [{
                                    "balloonText": "<b>[[category]]: [[value]]</b>",
                                    "fillColorsField": "color",
                                    "fillAlphas": 0.9,
                                    "lineAlpha": 0.2,
                                    "columnWidth": 0.1,
                                    "type": "column",
                                    "valueField": "visits"
                                }],
                                "chartCursor": {
                                    "categoryBalloonEnabled": false,
                                    "cursorAlpha": 0,
                                    "zoomable": false
                                },
                                "categoryField": "year",
                                "categoryAxis": {
                                    "gridPosition": "start",
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "lineAlpha": 0,
                                }
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-8 col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Statistics</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div id="line-area2" class="lineAreaDashboard" style="height:350px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var chart = AmCharts.makeChart("line-area2", {
                                "type": "serial",
                                "theme": "light",
                                "marginTop": 10,
                                "marginRight": 0,
                                "dataProvider": [{
                                    "year": "Jan",
                                    "value": 5,
                                    "value2": 80,
                                }, {
                                    "year": "Feb",
                                    "value": 30,
                                    "value2": 95,
                                }, {
                                    "year": "Mar",
                                    "value": 25,
                                    "value2": 87,
                                }, {
                                    "year": "Apr",
                                    "value": 55,
                                    "value2": 155,
                                }, {
                                    "year": "May",
                                    "value": 45,
                                    "value2": 140,
                                }, {
                                    "year": "Jun",
                                    "value": 65,
                                    "value2": 147,
                                }, {
                                    "year": "Jul",
                                    "value": 60,
                                    "value2": 130,
                                }, {
                                    "year": "Aug",
                                    "value": 105,
                                    "value2": 180,
                                }, {
                                    "year": "Sep",
                                    "value": 80,
                                    "value2": 160,
                                }, {
                                    "year": "Oct",
                                    "value": 110,
                                    "value2": 175,
                                }, {
                                    "year": "Nov",
                                    "value": 120,
                                    "value2": 165,
                                }, {
                                    "year": "Dec",
                                    "value": 150,
                                    "value2": 200,
                                }],
                                "valueAxes": [{
                                    "axisAlpha": 0,
                                    "position": "left"
                                }],
                                "graphs": [{
                                    "id": "g1",
                                    "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
                                    "bullet": "round",
                                    "lineColor": "#1de9b6",
                                    "lineThickness": 3,
                                    "negativeLineColor": "#1de9b6",
                                    "valueField": "value"
                                }, {
                                    "id": "g2",
                                    "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
                                    "bullet": "round",
                                    "lineColor": "#10adf5",
                                    "lineThickness": 3,
                                    "negativeLineColor": "#10adf5",
                                    "valueField": "value2"
                                }],
                                "chartCursor": {
                                    "cursorAlpha": 0,
                                    "valueLineEnabled": true,
                                    "valueLineBalloonEnabled": true,
                                    "valueLineAlpha": 0.3,
                                    "fullWidth": true
                                },
                                "categoryField": "year",
                                "categoryAxis": {
                                    "minorGridAlpha": 0,
                                    "minorGridEnabled": true,
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "lineAlpha": 0
                                },
                                "legend": {
                                    "useGraphSettings": true,
                                    "position": "top"
                                },
                            });
                        });
                    </script>



                </div>
                <div class="col-xl-4 col-md-12 datta-example">
                    <div class="card theme-bg gradientcolor">
                        <div class="card-header borderless">
                            <h5 class="text-white">Statistics</h5>
                        </div>
                        <div class="card-block p-0">
                            <div class="p-2 text-center">
                                <a class="text-white text-uppercase f-w-400">Month</a>
                                <a class="btn btn-round bg-white text-uppercase mx-3 px-4 f-w-400">Week</a>
                                <a class="text-white text-uppercase f-w-400">Day</a>
                            </div>
                            <div class="my-3 text-center text-white">
                                <a class=" d-block mb-1">$ 78.89 <span class="feather icon-arrow-up"></span></a>
                                <span>Week2 +15.44</span>
                            </div>
                            <div id="Chartline" class="lineChart ChartShadow" style="height:260px;">
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var chartDatac = [{
                                "Year": "Jan",
                                "value": 50
                            }, {
                                "Year": "Feb",
                                "value": 60
                            }, {
                                "Year": "Mar",
                                "value": 55
                            }, {
                                "Year": "Apr",
                                "value": 62
                            }, {
                                "Year": "May",
                                "value": 55
                            }, {
                                "Year": "Jun",
                                "value": 62
                            }];
                            var chartc = AmCharts.makeChart("Chartline", {
                                "type": "serial",
                                "addClassNames": true,
                                "defs": {
                                    "filter": [{
                                            "x": "-50%",
                                            "y": "-50%",
                                            "width": "200%",
                                            "height": "200%",
                                            "id": "blur",
                                            "feGaussianBlur": {
                                                "in": "SourceGraphic",
                                                "stdDeviation": "30"
                                            }
                                        },
                                        {
                                            "id": "shadow",
                                            "x": "-10%",
                                            "y": "-10%",
                                            "width": "120%",
                                            "height": "120%",
                                            "feOffset": {
                                                "result": "offOut",
                                                "in": "SourceAlpha",
                                                "dx": "0",
                                                "dy": "20"
                                            },
                                            "feGaussianBlur": {
                                                "result": "blurOut",
                                                "in": "offOut",
                                                "stdDeviation": "10"
                                            },
                                            "feColorMatrix": {
                                                "result": "blurOut",
                                                "type": "matrix",
                                                "values": "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .2 0"
                                            },
                                            "feBlend": {
                                                "in": "SourceGraphic",
                                                "in2": "blurOut",
                                                "mode": "normal"
                                            }
                                        }
                                    ]
                                },
                                "fontSize": 15,
                                "dataProvider": chartDatac,
                                "autoMarginOffset": 0,
                                "marginRight": 0,
                                "categoryField": "Year",
                                "categoryAxis": {
                                    "color": '#fff',
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "lineAlpha": 0,
                                    "offset": -20,
                                    "minPeriod": "YYYY",
                                    "inside": true,
                                },
                                "valueAxes": [{
                                    "fontSize": 0,
                                    "inside": true,
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "lineAlpha": 0,
                                    "minimum": 0,
                                    "maximum": 80,
                                }],
                                "chartCursor": {
                                    "valueLineEnabled": false,
                                    "valueLineBalloonEnabled": false,
                                    "cursorAlpha": 0,
                                    "zoomable": false,
                                    "valueZoomable": false,
                                    "cursorColor": "#fff",
                                    "categoryBalloonDateFormat": "YYYY",
                                    "categoryBalloonColor": "#1dd6d1",
                                    "valueLineAlpha": 0
                                },
                                "graphs": [{
                                    "id": "g1",
                                    "type": "line",
                                    "valueField": "value",
                                    "bullet": "round",
                                    "lineColor": "#ffffff",
                                    "lineAlpha": 1,
                                    "lineThickness": 3,
                                    "fillAlphas": 0,
                                    "showBalloon": true,
                                    "balloon": {
                                        "drop": true,
                                        "adjustBorderColor": false,
                                        "color": "#000",
                                        "fillAlphas": 0.2,
                                        "bullet": "round",
                                        "bulletBorderAlpha": 1,
                                        "bulletSize": 5,
                                        "hideBulletsCount": 50,
                                        "lineThickness": 2,
                                        "type": "smoothedLine",
                                        "useLineColorForBulletBorder": true,
                                        "valueField": "value",
                                        "balloonText": "<span style='font-size:18px;'>[[value]]</span>"
                                    },
                                }],
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>News Statistics</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block pl-0 pr-0 pb-2">
                            <div id="bar-chart" class="ChartShadow BarChart" style="height:250px;"></div>
                        </div>
                        <div class="card-block border-top">
                            <div class="row">
                                <div class="col text-center">
                                    <span class="theme-bg d-block rounded-circle mx-auto mb-2" style="width:10px; height:10px;"></span>
                                    <h6 class="mb-2">48</h6>
                                    <h6 class="mt-2 mb-0">Sport</h6>
                                </div>
                                <div class="col text-center">
                                    <span class="theme-bg2 d-block rounded-circle mx-auto mb-2" style="width:10px; height:10px;"></span>
                                    <h6 class="mb-2">36</h6>
                                    <h6 class="mt-2 mb-0">Music</h6>
                                </div>
                                <div class="col text-center">
                                    <span class="bg-c-blue d-block rounded-circle mx-auto mb-2" style="width:10px; height:10px;"></span>
                                    <h6 class="mb-2">41</h6>
                                    <h6 class="mt-2 mb-0">Travel</h6>
                                </div>
                                <div class="col text-center">
                                    <span class="bg-c-red d-block rounded-circle mx-auto mb-2" style="width:10px; height:10px;"></span>
                                    <h6 class="mb-2">7</h6>
                                    <h6 class="mt-2 mb-0">News</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var chart = AmCharts.makeChart("bar-chart", {
                                "type": "serial",
                                "theme": "light",
                                "dataProvider": [{
                                    "game": "Sport",
                                    "visits": 53,
                                    "color": ["#1de9b6", "#1dc4e9"]
                                }, {
                                    "game": "Music",
                                    "visits": 13,
                                    "color": ["#a389d4", "#899ed4"]
                                }, {
                                    "game": "Travel",
                                    "visits": 30,
                                    "color": ["#04a9f5", "#049df5"]
                                }, {
                                    "game": "News",
                                    "visits": 4,
                                    "color": ["#f44236", "#f48f36"]
                                }],
                                "valueAxes": [{
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "lineAlpha": 0,
                                    "fontSize": 0,
                                }],
                                "startDuration": 1,
                                "graphs": [{
                                    "balloonText": "<b>[[category]]: [[value]]</b>",
                                    "fillColorsField": "color",
                                    "fillAlphas": 0.9,
                                    "lineAlpha": 0,
                                    "columnWidth": 0.2,
                                    "type": "column",
                                    "valueField": "visits"
                                }],
                                "chartCursor": {
                                    "categoryBalloonEnabled": false,
                                    "cursorAlpha": 0,
                                    "zoomable": false
                                },
                                "categoryField": "game",
                                "categoryAxis": {
                                    "gridPosition": "start",
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "lineAlpha": 0,
                                }
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-8 col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Statistics</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div id="line-chart1" class="ChartShadow" style="height:350px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var chart = AmCharts.makeChart("line-chart1", {
                                "type": "serial",
                                "theme": "light",
                                "marginTop": 10,
                                "marginRight": 0,
                                "dataProvider": [{
                                    "year": "Jan",
                                    "value": 65,
                                    "value2": 125,
                                    "value3": 175,
                                }, {
                                    "year": "Feb",
                                    "value": 105,
                                    "value2": 80,
                                    "value3": 190,
                                }, {
                                    "year": "Mar",
                                    "value": 145,
                                    "value2": 30,
                                    "value3": 160,
                                }, {
                                    "year": "Apr",
                                    "value": 105,
                                    "value2": 70,
                                    "value3": 190,
                                }, {
                                    "year": "May",
                                    "value": 145,
                                    "value2": 110,
                                    "value3": 140,
                                }, {
                                    "year": "Jun",
                                    "value": 185,
                                    "value2": 150,
                                    "value3": 100,
                                }],
                                "valueAxes": [{
                                    "axisAlpha": 0,
                                    "position": "left"
                                }],
                                "graphs": [{
                                    "id": "g1",
                                    "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
                                    "bullet": "false",
                                    "lineColor": "#2cd929",
                                    "lineThickness": 3,
                                    "negativeLineColor": "#2cd929",
                                    "type": "smoothedLine",
                                    "valueField": "value"
                                }, {
                                    "id": "g2",
                                    "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
                                    "bullet": "false",
                                    "lineColor": "#29bdf5",
                                    "lineThickness": 3,
                                    "negativeLineColor": "#29bdf5",
                                    "type": "smoothedLine",
                                    "valueField": "value2"
                                }, {
                                    "id": "g3",
                                    "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
                                    "bullet": "false",
                                    "lineColor": "#fdda08",
                                    "lineThickness": 3,
                                    "negativeLineColor": "#fdda08",
                                    "type": "smoothedLine",
                                    "valueField": "value3"
                                }],
                                "chartCursor": {
                                    "cursorAlpha": 0,
                                    "valueLineEnabled": true,
                                    "valueLineBalloonEnabled": true,
                                    "valueLineAlpha": 0.5,
                                    "fullWidth": true
                                },
                                "categoryField": "year",
                                "categoryAxis": {
                                    "minorGridAlpha": 0.1,
                                    "minorGridEnabled": true,
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "lineAlpha": 0
                                },
                                "legend": {
                                    "useGraphSettings": true,
                                    "position": "top"
                                },
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-8 col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Statistics</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div id="line-chart2" class="lineChart2 ChartShadow" style="height:350px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var chart = AmCharts.makeChart("line-chart2", {
                                "type": "serial",
                                "theme": "light",
                                "marginTop": 10,
                                "marginRight": 0,
                                "dataProvider": [{
                                    "year": "Jan",
                                    "value": 160,
                                    "value2": 85,
                                }, {
                                    "year": "Feb",
                                    "value": 140,
                                    "value2": 95,
                                }, {
                                    "year": "Mar",
                                    "value": 150,
                                    "value2": 90,
                                }, {
                                    "year": "Apr",
                                    "value": 95,
                                    "value2": 125,
                                }, {
                                    "year": "May",
                                    "value": 130,
                                    "value2": 105,
                                }, {
                                    "year": "Jun",
                                    "value": 55,
                                    "value2": 120,
                                }, {
                                    "year": "Jul",
                                    "value": 75,
                                    "value2": 110,
                                }, {
                                    "year": "Aug",
                                    "value": 65,
                                    "value2": 140,
                                }, {
                                    "year": "Sep",
                                    "value": 140,
                                    "value2": 100,
                                }, {
                                    "year": "oct",
                                    "value": 120,
                                    "value2": 95,
                                }, {
                                    "year": "Nov",
                                    "value": 110,
                                    "value2": 130,
                                }, {
                                    "year": "Dec",
                                    "value": 180,
                                    "value2": 80,
                                }],
                                "valueAxes": [{
                                    "axisAlpha": 0,
                                    "minimum": 0,
                                    "maximum": 200,
                                    "position": "left"
                                }],
                                "graphs": [{
                                    "id": "g1",
                                    "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
                                    "bullet": "round",
                                    "bulletBorderAlpha": 2,
                                    "bulletAlpha": 1,
                                    "bulletSize": 12,
                                    "stackable": false,
                                    "bulletColor": "#fff",
                                    "bulletBorderColor": "#a389d4",
                                    "bulletBorderThickness": 3,
                                    "lineColor": "#a389d4",
                                    "lineThickness": 2,
                                    "type": "smoothedLine",
                                    "valueField": "value"
                                }, {
                                    "id": "g2",
                                    "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
                                    "bullet": "round",
                                    "bulletBorderAlpha": 2,
                                    "bulletAlpha": 1,
                                    "bulletSize": 12,
                                    "stackable": false,
                                    "bulletColor": "#fff",
                                    "bulletBorderColor": "#1ddcc8",
                                    "bulletBorderThickness": 3,
                                    "lineColor": "#1ddcc8",
                                    "lineThickness": 2,
                                    "type": "smoothedLine",
                                    "valueField": "value2"
                                }],
                                "chartCursor": {
                                    "cursorAlpha": 0,
                                    "valueLineEnabled": true,
                                    "valueLineBalloonEnabled": true,
                                    "valueLineAlpha": 0.5,
                                    "fullWidth": true
                                },
                                "categoryField": "year",
                                "categoryAxis": {
                                    "minorGridAlpha": 0,
                                    "minorGridEnabled": true,
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "lineAlpha": 0
                                },
                                "legend": {
                                    "useGraphSettings": true,
                                    "position": "top"
                                },
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card  bg-c-blue">
                        <div class="card-header borderless">
                            <h5 class="text-white">Earnings</h5>
                        </div>
                        <div class="card-block" style="padding:0 25px;">
                            <div class="earning-text mb-4">
                                <h3 class="mb-3 text-white f-w-300">$ 4295.36 <i class="feather icon-arrow-up teal accent-3"></i></h3>
                                <span class="text-uppercase text-white d-block">Total Earnings</span>
                            </div>
                            <div id="Widget-line-chart" class="WidgetlineChart2 ChartShadow" style="height:300px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var chartDatac = [{
                                "day": "Mon",
                                "value": 60
                            }, {
                                "day": "Tue",
                                "value": 45
                            }, {
                                "day": "Wed",
                                "value": 70
                            }, {
                                "day": "Thu",
                                "value": 55
                            }, {
                                "day": "Fri",
                                "value": 70
                            }, {
                                "day": "Sat",
                                "value": 55
                            }, {
                                "day": "Sun",
                                "value": 70
                            }];
                            var chartc = AmCharts.makeChart("Widget-line-chart", {
                                "type": "serial",
                                "addClassNames": true,
                                "defs": {
                                    "filter": [{
                                            "x": "-50%",
                                            "y": "-50%",
                                            "width": "200%",
                                            "height": "200%",
                                            "id": "blur",
                                            "feGaussianBlur": {
                                                "in": "SourceGraphic",
                                                "stdDeviation": "30"
                                            }
                                        },
                                        {
                                            "id": "shadow",
                                            "x": "-10%",
                                            "y": "-10%",
                                            "width": "120%",
                                            "height": "120%",
                                            "feOffset": {
                                                "result": "offOut",
                                                "in": "SourceAlpha",
                                                "dx": "0",
                                                "dy": "20"
                                            },
                                            "feGaussianBlur": {
                                                "result": "blurOut",
                                                "in": "offOut",
                                                "stdDeviation": "10"
                                            },
                                            "feColorMatrix": {
                                                "result": "blurOut",
                                                "type": "matrix",
                                                "values": "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .2 0"
                                            },
                                            "feBlend": {
                                                "in": "SourceGraphic",
                                                "in2": "blurOut",
                                                "mode": "normal"
                                            }
                                        }
                                    ]
                                },
                                "fontSize": 15,
                                "dataProvider": chartDatac,
                                "autoMarginOffset": 0,
                                "marginRight": 0,
                                "categoryField": "day",
                                "categoryAxis": {
                                    "color": '#fff',
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "lineAlpha": 0,
                                    "offset": -20,
                                    "inside": true,
                                },
                                "valueAxes": [{
                                    "fontSize": 0,
                                    "inside": true,
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "lineAlpha": 0,
                                    "minimum": 0,
                                    "maximum": 100,
                                }],
                                "chartCursor": {
                                    "valueLineEnabled": false,
                                    "valueLineBalloonEnabled": false,
                                    "cursorAlpha": 0,
                                    "zoomable": false,
                                    "valueZoomable": false,
                                    "cursorColor": "#fff",
                                    "categoryBalloonColor": "#51b4e6",
                                    "valueLineAlpha": 0
                                },
                                "graphs": [{
                                    "id": "g1",
                                    "type": "line",
                                    "valueField": "value",
                                    "lineColor": "#ffffff",
                                    "lineAlpha": 1,
                                    "lineThickness": 3,
                                    "fillAlphas": 0,
                                    "showBalloon": true,
                                    "balloon": {
                                        "drop": true,
                                        "adjustBorderColor": false,
                                        "color": "#ffffff",
                                        "fillAlphas": 0.2,
                                        "bullet": "round",
                                        "bulletBorderAlpha": 1,
                                        "bulletSize": 5,
                                        "hideBulletsCount": 50,
                                        "lineThickness": 2,
                                        "useLineColorForBulletBorder": true,
                                        "valueField": "value",
                                        "balloonText": "<span style='font-size:18px;'>[[value]]</span>"
                                    },
                                }],
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Earnings</h5>
                            <span class="d-block pt-2">Mon 15 - Sun 21</span>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div class="earning-price mb-4">
                                <h3 class="m-0 f-w-300">$ 894.39</h3>
                            </div>
                            <div id="Widget-line-chart1" class="WidgetlineChart " style="height:300px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var chartDatac = [{
                                "day": "Mon",
                                "value": 60
                            }, {
                                "day": "Tue",
                                "value": 50
                            }, {
                                "day": "Wed",
                                "value": 59
                            }, {
                                "day": "Thu",
                                "value": 55
                            }, {
                                "day": "Fri",
                                "value": 65
                            }, {
                                "day": "Sat",
                                "value": 55
                            }, {
                                "day": "Sun",
                                "value": 70
                            }];
                            var chartc = AmCharts.makeChart("Widget-line-chart1", {
                                "type": "serial",
                                "addClassNames": true,
                                "defs": {
                                    "filter": [{
                                            "x": "-50%",
                                            "y": "-50%",
                                            "width": "200%",
                                            "height": "200%",
                                            "id": "blur",
                                            "feGaussianBlur": {
                                                "in": "SourceGraphic",
                                                "stdDeviation": "30"
                                            }
                                        },
                                        {
                                            "id": "shadow",
                                            "x": "-10%",
                                            "y": "-10%",
                                            "width": "120%",
                                            "height": "120%",
                                            "feOffset": {
                                                "result": "offOut",
                                                "in": "SourceAlpha",
                                                "dx": "0",
                                                "dy": "20"
                                            },
                                            "feGaussianBlur": {
                                                "result": "blurOut",
                                                "in": "offOut",
                                                "stdDeviation": "10"
                                            },
                                            "feColorMatrix": {
                                                "result": "blurOut",
                                                "type": "matrix",
                                                "values": "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .2 0"
                                            },
                                            "feBlend": {
                                                "in": "SourceGraphic",
                                                "in2": "blurOut",
                                                "mode": "normal"
                                            }
                                        }
                                    ]
                                },
                                "fontSize": 15,
                                "dataProvider": chartDatac,
                                "autoMarginOffset": 0,
                                "marginRight": 0,
                                "categoryField": "day",
                                "categoryAxis": {
                                    "color": '#393c40',
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "lineAlpha": 0,
                                    "offset": -20,
                                    "inside": true,
                                },
                                "valueAxes": [{
                                    "fontSize": 0,
                                    "inside": true,
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "lineAlpha": 0,
                                    "minimum": 0,
                                    "maximum": 100,
                                }],
                                "chartCursor": {
                                    "valueLineEnabled": false,
                                    "valueLineBalloonEnabled": false,
                                    "cursorAlpha": 0,
                                    "zoomable": false,
                                    "valueZoomable": false,
                                    "cursorColor": "#fff",
                                    "categoryBalloonColor": "#23d3d7",
                                    "valueLineAlpha": 0
                                },
                                "graphs": [{
                                    "id": "g1",
                                    "type": "line",
                                    "valueField": "value",
                                    "lineColor": "#23d3d7",
                                    "lineAlpha": 1,
                                    "lineThickness": 3,
                                    "fillAlphas": 0,
                                    "showBalloon": true,
                                    "balloon": {
                                        "drop": true,
                                        "adjustBorderColor": false,
                                        "color": "#ffffff",
                                        "fillAlphas": 0.2,
                                        "bullet": "round",
                                        "bulletBorderAlpha": 1,
                                        "bulletSize": 5,
                                        "hideBulletsCount": 50,
                                        "lineThickness": 2,
                                        "useLineColorForBulletBorder": true,
                                        "valueField": "value",
                                        "balloonText": "<span style='font-size:18px;'>[[value]]</span>"
                                    },
                                }],
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Reply</h5>
                            <span class="d-block pt-2">Time for first reply</span>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div class="reply-price">
                                <h3 class="f-w-300">2.43 h</h3>
                                <span class="text-uppercase">average time for first reply</span>
                            </div>
                            <div id="bar-chart1" class="ChartShadow BarChart barChart1" style="height:290px;"></div>
                        </div>
                        <script type="text/javascript">
                            $(document).ready(function() {
                                var chart = AmCharts.makeChart("bar-chart1", {
                                    "type": "serial",
                                    "theme": "light",
                                    "dataProvider": [{
                                        "Average": "0-1",
                                        "value": 53,
                                        "color": ["#1de9b6", "#1dc4e9"]
                                    }, {
                                        "Average": "1-4",
                                        "value": 13,
                                        "color": ["#a389d4", "#899ed4"]
                                    }, {
                                        "Average": "8-24",
                                        "value": 30,
                                        "color": ["#04a9f5", "#049df5"]
                                    }, {
                                        "Average": ">24",
                                        "value": 4,
                                        "color": ["#f44236", "#f48f36"]
                                    }],
                                    "valueAxes": [{
                                        "gridAlpha": 0,
                                        "axisAlpha": 0,
                                        "lineAlpha": 0,
                                        "fontSize": 0,
                                    }],
                                    "startDuration": 1,
                                    "graphs": [{
                                        "balloonText": "<b>[[category]]: [[value]]</b>",
                                        "labelPosition": "top",
                                        "labelText": "[[value]]",
                                        "fillColorsField": "color",
                                        "fillAlphas": 0.9,
                                        "lineAlpha": 0,
                                        "type": "column",
                                        "valueField": "value"
                                    }],
                                    "chartCursor": {
                                        "categoryBalloonEnabled": false,
                                        "cursorAlpha": 0,
                                        "zoomable": false
                                    },
                                    "categoryField": "Average",
                                    "categoryAxis": {
                                        "gridPosition": "start",
                                        "gridAlpha": 0,
                                        "axisAlpha": 0,
                                        "lineAlpha": 0,
                                    }
                                });
                            });
                        </script>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Statistics</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div id="chart-percent" class="chart-percent" style="height:290px;"></div>
                            <div class="row mb-3">
                                <div class="col">
                                    <span class="mb-1 text-muted d-block">23%</span>
                                    <div class="progress" style="height: 5px;">
                                        <div class="progress-bar progress-c-green" role="progressbar" style="width: 23%;" aria-valuenow="23" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="col">
                                    <span class="mb-1 text-muted d-block">14%</span>
                                    <div class="progress" style="height: 5px;">
                                        <div class="progress-bar progress-c-yellow" role="progressbar" style="width: 14%;" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col">
                                    <span class="mb-1 text-muted d-block">35%</span>
                                    <div class="progress" style="height: 5px;">
                                        <div class="progress-bar progress-c-purple" role="progressbar" style="width: 35%;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="col">
                                    <span class="mb-1 text-muted d-block">28%</span>
                                    <div class="progress" style="height: 5px;">
                                        <div class="progress-bar progress-c-blue" role="progressbar" style="width: 28%;" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var chart = AmCharts.makeChart("chart-percent", {
                                "type": "pie",
                                "theme": "light",
                                "dataProvider": [{
                                    "title": "page done",
                                    "value": 23,
                                    "color": "#1de9b6"
                                }, {
                                    "title": "page progress",
                                    "value": 14,
                                    "color": "#f4c22b"
                                }, {
                                    "title": "page outstanding",
                                    "value": 35,
                                    "color": "#a389d4"
                                }, {
                                    "title": "page started",
                                    "value": 28,
                                    "color": "#04a9f5"
                                }],
                                "titleField": "title",
                                "valueField": "value",
                                "colorField": "color",
                                "labelRadius": 5,
                                "radius": "42%",
                                "innerRadius": "91%",
                                "labelText": "",
                                "balloon": {
                                    "fixedPosition": true
                                },
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-8 col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Statistics</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block pb-0">
                            <div id="bar-chart2" class="bar-chart2" style="height:350px;"></div>
                        </div>
                        <script type="text/javascript">
                            $(document).ready(function() {
                                var chart = AmCharts.makeChart("bar-chart2", {
                                    "type": "serial",
                                    "theme": "light",
                                    "marginTop": 10,
                                    "marginRight": 0,
                                    "valueAxes": [{
                                        "id": "v1",
                                        "position": "left",
                                        "axisAlpha": 0,
                                        "lineAlpha": 0,
                                        "autoGridCount": false,
                                        "labelFunction": function(value) {
                                            return +Math.round(value) + "00";
                                        }
                                    }],
                                    "graphs": [{
                                        "id": "g1",
                                        "valueAxis": "v1",
                                        "lineColor": ["#1de9b6", "#1dc4e9"],
                                        "fillColors": ["#1de9b6", "#1dc4e9"],
                                        "fillAlphas": 1,
                                        "type": "column",
                                        "title": "SALES",
                                        "valueField": "sales",
                                        "columnWidth": 0.3,
                                        "legendValueText": "$[[value]]M",
                                        "balloonText": "[[title]]<br /><b style='font-size: 130%'>$[[value]]M</b>"
                                    }, {
                                        "id": "g2",
                                        "valueAxis": "v1",
                                        "lineColor": ["#a389d4", "#899ed4"],
                                        "fillColors": ["#a389d4", "#899ed4"],
                                        "fillAlphas": 1,
                                        "type": "column",
                                        "title": "VISITS ",
                                        "valueField": "visits",
                                        "columnWidth": 0.3,
                                        "legendValueText": "$[[value]]M",
                                        "balloonText": "[[title]]<br /><b style='font-size: 130%'>$[[value]]M</b>"
                                    }, {
                                        "id": "g3",
                                        "valueAxis": "v1",
                                        "lineColor": ["#04a9f5", "#049df5"],
                                        "fillColors": ["#04a9f5", "#049df5"],
                                        "fillAlphas": 1,
                                        "type": "column",
                                        "title": "CLICKS",
                                        "valueField": "clicks",
                                        "columnWidth": 0.3,
                                        "legendValueText": "$[[value]]M",
                                        "balloonText": "[[title]]<br /><b style='font-size: 130%'>$[[value]]M</b>"
                                    }],
                                    "chartCursor": {
                                        "pan": true,
                                        "valueLineEnabled": true,
                                        "valueLineBalloonEnabled": true,
                                        "cursorAlpha": 0,
                                        "valueLineAlpha": 0.2
                                    },
                                    "categoryField": "Year",
                                    "categoryAxis": {
                                        "dashLength": 1,
                                        "gridAlpha": 0,
                                        "axisAlpha": 0,
                                        "lineAlpha": 0,
                                        "minorGridEnabled": true
                                    },
                                    "legend": {
                                        "useGraphSettings": true,
                                        "position": "top"
                                    },
                                    "balloon": {
                                        "borderThickness": 1,
                                        "shadowAlpha": 0
                                    },
                                    "dataProvider": [{
                                        "Year": "2014",
                                        "sales": 2,
                                        "visits": 4,
                                        "clicks": 3
                                    }, {
                                        "Year": "2015",
                                        "sales": 4,
                                        "visits": 7,
                                        "clicks": 5
                                    }, {
                                        "Year": "2016",
                                        "sales": 2,
                                        "visits": 3,
                                        "clicks": 4
                                    }, {
                                        "Year": "2017",
                                        "sales": 4.5,
                                        "visits": 6,
                                        "clicks": 4
                                    }]
                                });
                            });
                        </script>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Devices</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div id="device-chart" class="device-chart" style="width:250px;height:250px;"></div>
                            <div class="row">
                                <div class="col-sm-12 pt-3 pb-3 border-top">
                                    <span class="mr-3"><i class="feather icon-circle text-c-green  mr-2"></i>Desktop</span>
                                    <span class="float-right">41.6 %</span>
                                </div>

                                <div class="col-sm-12 pt-3 pb-3 border-top">
                                    <span class="mr-3"><i class="feather icon-circle text-c-blue  mr-2"></i>Mobile</span>
                                    <span class="float-right">32.5 %</span>
                                </div>

                                <div class="col-sm-12 pt-3 border-top">
                                    <span class="mr-3"><i class="feather icon-circle text-c-purple  mr-2"></i>Tablet</span>
                                    <span class="float-right">25.9 %</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var chart = AmCharts.makeChart("device-chart", {
                                "type": "pie",
                                "theme": "light",
                                "labelRadius": -35,
                                "labelText": "[[percents]]%",
                                "dataProvider": [{
                                    "device": "Tablet",
                                    "percentage": 25.9,
                                    "color": "#a389d4"
                                }, {
                                    "device": "Mobile",
                                    "percentage": 32.5,
                                    "color": "#04a9f5"
                                }, {
                                    "device": "Desktop",
                                    "percentage": 41.6,
                                    "color": "#1de9b6"
                                }],
                                "valueField": "percentage",
                                "titleField": "device",
                                "colorField": "color",
                                "balloon": {
                                    "fixedPosition": true
                                },
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-3.jpg" alt="activity-user"> Jonas Nielsen</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <h3 class="f-w-300">$ 359,234</h3>
                            <span class="d-block pt-1 pb-3">TOTAL SAVINGS</span>
                            <div id="chart-percent1" class="chart-percent1" style="height:200px;"></div>
                            <div class="client-name">
                                <div class="row">
                                    <div class="col-sm-12 pt-2 pb-2">
                                        <span class="mr-3"><i class="feather icon-circle text-c-green  mr-2"></i>Main wallet</span>
                                        <span class="float-right text-muted">$194.42</span>
                                    </div>
                                    <div class="col-sm-12 pt-2 pb-2">
                                        <span class="mr-3"><i class="feather icon-circle text-c-blue  mr-2"></i>Travel</span>
                                        <span class="float-right text-muted">$86.48</span>
                                    </div>
                                    <div class="col-sm-12 pt-2">
                                        <span class="mr-3"><i class="feather icon-circle text-c-purple  mr-2"></i>Food & Drink</span>
                                        <span class="float-right text-muted">$23.27</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var chart = AmCharts.makeChart("chart-percent1", {
                                "type": "pie",
                                "theme": "light",
                                "dataProvider": [{
                                    "title": "Main Wallet",
                                    "value": 33.33,
                                    "color": "#1de9b6"
                                }, {
                                    "title": "Travel",
                                    "value": 33.33,
                                    "color": "#a389d4"
                                }, {
                                    "title": "Food & Drink",
                                    "value": 33.33,
                                    "color": "#04a9f5"
                                }],
                                "titleField": "title",
                                "valueField": "value",
                                "colorField": "color",
                                "labelRadius": 5,
                                "radius": "42%",
                                "innerRadius": "89%",
                                "labelText": "",
                                "balloon": {
                                    "fixedPosition": true
                                },
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-8 col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Yearly Summary</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div class="row pb-3">
                                <div class="col-md-4 col-6 text-center m-b-15">
                                    <h3 class="f-w-300">$ 2356.4</h3>
                                    <span>Invoiced</span>
                                </div>
                                <div class="col-md-4 col-6 text-center m-b-15">
                                    <h3 class="f-w-300">$ 1935.6</h3>
                                    <span>Profit</span>
                                </div>
                                <div class="col-md-4 col-12 text-center m-b-15">
                                    <h3 class="f-w-300">$ 468.9</h3>
                                    <span>Expenses</span>
                                </div>
                            </div>
                            <div id="bar-chart3" class="bar-chart3" style="height:300px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var chart = AmCharts.makeChart("bar-chart3", {
                                "type": "serial",
                                "theme": "light",
                                "marginTop": 10,
                                "marginRight": 0,
                                "valueAxes": [{
                                    "id": "v1",
                                    "position": "left",
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "lineAlpha": 0,
                                    "autoGridCount": false,
                                    "labelFunction": function(value) {
                                        return +Math.round(value) + "00";
                                    }
                                }],
                                "graphs": [{
                                    "id": "g1",
                                    "valueAxis": "v1",
                                    "lineColor": ["#1de9b6", "#1dc4e9"],
                                    "fillColors": ["#1de9b6", "#1dc4e9"],
                                    "fillAlphas": 1,
                                    "type": "column",
                                    "title": "Last Week ",
                                    "valueField": "sales2",
                                    "columnWidth": 0.2,
                                    "legendValueText": "$[[value]]M",
                                    "balloonText": "[[title]]<br /><b style='font-size: 130%'>$[[value]]M</b>"
                                }, {
                                    "id": "g2",
                                    "valueAxis": "v1",
                                    "lineColor": ["#a389d4", "#899ed4"],
                                    "fillColors": ["#a389d4", "#899ed4"],
                                    "fillAlphas": 1,
                                    "type": "column",
                                    "title": "Market Place ",
                                    "valueField": "sales1",
                                    "columnWidth": 0.2,
                                    "legendValueText": "$[[value]]M",
                                    "balloonText": "[[title]]<br /><b style='font-size: 130%'>$[[value]]M</b>"
                                }],
                                "chartCursor": {
                                    "pan": true,
                                    "valueLineEnabled": true,
                                    "valueLineBalloonEnabled": true,
                                    "cursorAlpha": 0,
                                    "valueLineAlpha": 0.2
                                },
                                "categoryField": "date",
                                "categoryAxis": {
                                    "dashLength": 1,
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "lineAlpha": 0,
                                    "minorGridEnabled": true
                                },
                                "legend": {
                                    "useGraphSettings": true,
                                    "position": "top"
                                },
                                "balloon": {
                                    "borderThickness": 1,
                                    "shadowAlpha": 0
                                },
                                "dataProvider": [{
                                    "date": "Q1",
                                    "sales1": 4.5,
                                    "sales2": 5.5
                                }, {
                                    "date": "Q2",
                                    "sales1": 5,
                                    "sales2": 6.5
                                }, {
                                    "date": "Q3",
                                    "sales1": 6.5,
                                    "sales2": 5.5
                                }, {
                                    "date": "Q4",
                                    "sales1": 6,
                                    "sales2": 7
                                }]
                            });
                        });
                    </script>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Statistics</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div id="chart-statistics" class="chart-statistics" style="width:250px;height:250px;"> </div>
                            <div class="row">
                                <div class="col-sm-12 pt-2 pb-2">
                                    <span class="mr-3"><i class="feather icon-circle text-c-green  mr-2"></i>page Views</span>
                                    <span class="float-right">15.5 %</span>
                                </div>
                                <div class="col-sm-12 pt-2 pb-2">
                                    <span class="mr-3"><i class="feather icon-circle text-c-blue  mr-2"></i>page Clicks</span>
                                    <span class="float-right">23.5 %</span>
                                </div>
                                <div class="col-sm-12 pt-2">
                                    <span class="mr-3"><i class="feather icon-circle text-c-purple  mr-2"></i>page Likes</span>
                                    <span class="float-right">36.3 %</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var chart = AmCharts.makeChart("chart-statistics", {
                                "type": "pie",
                                "theme": "light",
                                "dataProvider": [{
                                    "title": "page Views",
                                    "value": 24.7,
                                    "color": "#1de9b6"
                                }, {
                                    "title": "page Clicks",
                                    "value": 36.3,
                                    "color": "#a389d4"
                                }, {
                                    "title": "page Likes",
                                    "value": 23.5,
                                    "color": "#04a9f5"
                                }, {
                                    "title": "page",
                                    "value": 15.5,
                                    "color": "#ecedef"
                                }],
                                "titleField": "title",
                                "valueField": "value",
                                "colorField": "color",
                                "labelRadius": 5,
                                "radius": "42%",
                                "innerRadius": "90%",
                                "labelText": "",
                                "balloon": {
                                    "fixedPosition": true
                                },
                            });
                        });
                    </script>
                </div>
                <div class="col-md-12 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Statistics</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <h3 class="f-w-300">$ 894.39</h3>
                        </div>
                        <div id="Earnings-chart" style="height:300px;"></div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var chartData = [{
                                "year": "1999",
                                "value": 30
                            }, {
                                "year": "2000",
                                "value": 55
                            }, {
                                "year": "2001",
                                "value": 80
                            }, {
                                "year": "2002",
                                "value": 60
                            }, {
                                "year": "2003",
                                "value": 70
                            }, {
                                "year": "2004",
                                "value": 70
                            }, {
                                "year": "2005",
                                "value": 110
                            }, {
                                "year": "2006",
                                "value": 90
                            }, {
                                "year": "2007",
                                "value": 130
                            }];
                            var chart1 = AmCharts.makeChart("Earnings-chart", {
                                "type": "serial",
                                "addClassNames": true,
                                "defs": {
                                    "filter": [{
                                            "x": "-50%",
                                            "y": "-50%",
                                            "width": "200%",
                                            "height": "200%",
                                            "id": "blur",
                                            "feGaussianBlur": {
                                                "in": "SourceGraphic",
                                                "stdDeviation": "30"
                                            }
                                        },
                                        {
                                            "id": "shadow",
                                            "x": "-10%",
                                            "y": "-10%",
                                            "width": "120%",
                                            "height": "120%",
                                            "feOffset": {
                                                "result": "offOut",
                                                "in": "SourceAlpha",
                                                "dx": "0",
                                                "dy": "20"
                                            },
                                            "feGaussianBlur": {
                                                "result": "blurOut",
                                                "in": "offOut",
                                                "stdDeviation": "10"
                                            },
                                            "feColorMatrix": {
                                                "result": "blurOut",
                                                "type": "matrix",
                                                "values": "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .2 0"
                                            },
                                            "feBlend": {
                                                "in": "SourceGraphic",
                                                "in2": "blurOut",
                                                "mode": "normal"
                                            }
                                        }
                                    ]
                                },
                                "fontSize": 15,
                                "dataProvider": chartData,
                                "dataDateFormat": "YYYY",
                                "autoMarginOffset": 0,
                                "marginRight": -1,
                                "marginBottom": -2,
                                "categoryField": "year",
                                "categoryAxis": {
                                    "color": '#fff',
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "lineAlpha": 0,
                                    "offset": -20,
                                    "inside": true,
                                    "parseDates": true,
                                    "minPeriod": "YYYY"
                                },
                                "chartCursor": {
                                    "valueLineEnabled": false,
                                    "valueLineBalloonEnabled": false,
                                    "cursorAlpha": 0,
                                    "zoomable": false,
                                    "cursorColor": "#fff",
                                    "categoryBalloonColor": "#88dcef",
                                    "valueZoomable": false,
                                    "valueLineAlpha": 0
                                },
                                "valueAxes": [{
                                    "fontSize": 0,
                                    "inside": true,
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "lineAlpha": 0,
                                }],
                                "graphs": [{
                                    "id": "g1",
                                    "type": "line",
                                    "valueField": "value",
                                    "fillColors": [
                                        "#1dc4e9",
                                        "#A389D4"
                                    ],
                                    "lineColor": "#1dc4e9",
                                    "balloon": {
                                        "drop": true,
                                        "adjustBorderColor": false,
                                        "color": "#ffffff",
                                        "type": "smoothedLine"
                                    },
                                    "lineAlpha": 1,
                                    "lineThickness": 5,
                                    "fillAlphas": 0.2,
                                    "showBalloon": true
                                }],
                            });
                            setTimeout(function() {
                                chart1.zoomToIndexes(1, chartData.length - 2);
                            }, 400);
                        });
                    </script>


                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Activity</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div id="chart-activity" class="chart-activity" style="width:220px;height:230px;"> </div>
                            <div class="row text-center">
                                <div class="col-6">
                                    <h6 class="text-uppercase d-block mb-2">max</h6>
                                    <h3 class="f-w-300">9.376</h3>
                                    <h6>Steps</h6>
                                </div>
                                <div class="col-6">
                                    <h6 class="text-uppercase d-block mb-2">min</h6>
                                    <h3 class="font-weight-light">237</h3>
                                    <h6>Steps</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var chart = AmCharts.makeChart("chart-activity", {
                                "type": "pie",
                                "theme": "light",
                                "dataProvider": [{
                                    "title": "Max",
                                    "value": 550,
                                    "color": "#1de9b6"
                                }, {
                                    "title": "Min",
                                    "value": 237,
                                    "color": "#ecedef"
                                }],
                                "titleField": "title",
                                "valueField": "value",
                                "colorField": "color",
                                "labelRadius": 5,
                                "radius": "42%",
                                "innerRadius": "95%",
                                "labelText": "",
                                "balloon": {
                                    "fixedPosition": true
                                },
                            });
                        });
                    </script>

                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Statistics</h5>
                            <span class="d-block pt-2">Last 6 Months</span>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div id="sales-render" style="height:300px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var chart = AmCharts.makeChart("sales-render", {
                                "type": "radar",
                                "theme": "light",
                                "dataProvider": [{
                                    "Month": "Jan",
                                    "visit": 100,
                                    "sales": 80
                                }, {
                                    "Month": "Feb",
                                    "visit": 60,
                                    "sales": 90
                                }, {
                                    "Month": "Mar",
                                    "visit": 100,
                                    "sales": 80
                                }, {
                                    "Month": "Apr",
                                    "visit": 100,
                                    "sales": 110
                                }, {
                                    "Month": "May",
                                    "visit": 100,
                                    "sales": 40
                                }, {
                                    "Month": "Jun",
                                    "visit": 80,
                                    "sales": 115
                                }],
                                "valueAxes": [{
                                    "axisTitleOffset": 20,
                                    "minimum": 0,
                                    "axisAlpha": 0.15
                                }, {
                                    "id": "v2",
                                    "axisTitleOffset": 20,
                                    "minimum": 0,
                                    "axisAlpha": 0,
                                    "inside": true
                                }],
                                "startDuration": 2,
                                "graphs": [{
                                        "balloonText": "[[value]] visit of per year",
                                        "bullet": "false",
                                        "fillAlphas": 1,
                                        "lineColor": ["#a389d4", "#899ed4"],
                                        "valueField": "visit"
                                    },
                                    {
                                        "balloonText": "[[value]] sales of per year",
                                        "bullet": "false",
                                        "valueField": "sales",
                                        "fillAlphas": 1,
                                        "lineColor": ["#1de9b6", "#1dc4e9"],
                                        "valueAxis": "v2"
                                    }
                                ],
                                "categoryField": "Month",
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Web Statistics</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div id="webchart" style="height:250px;"></div>
                            <div class="row">
                                <div class="col-sm-12 pt-3 pb-3 mt-3 border-top">
                                    <span class="mr-3">Sales</span>
                                    <span class="float-right">563 / 735</span>
                                </div>

                                <div class="col-sm-12 pt-3 pb-3 border-top">
                                    <span class="mr-3">Clicks</span>
                                    <span class="float-right">76898 / 95442</span>
                                </div>
                                <div class="col-sm-12 pt-3 pb-3 border-top">
                                    <span class="mr-3">Views</span>
                                    <span class="float-right">3682 / 4235</span>
                                </div>
                                <div class="col-sm-12 pt-3 border-top">
                                    <span class="mr-3">Visits</span>
                                    <span class="float-right">2348 / 3749</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var chart = AmCharts.makeChart("webchart", {
                                "type": "radar",
                                "theme": "light",
                                "dataProvider": [{
                                    "direction": "Sales",
                                    "value": 15
                                }, {
                                    "direction": "Visits",
                                    "value": 13
                                }, {
                                    "direction": "Views",
                                    "value": 11.1
                                }, {
                                    "direction": "Clicks",
                                    "value": 15
                                }],
                                "valueAxes": [{
                                    "gridType": "circles",
                                    "minimum": 0,
                                    "autoGridCount": true,
                                    "axisAlpha": 0,
                                    "fillAlpha": 0.05,
                                    "fillColor": "#eff1f4",
                                    "gridAlpha": 0.08,
                                    "position": "center"
                                }],
                                "startDuration": 1,
                                "graphs": [{
                                    "balloonText": "[[category]]: [[value]] m/s",
                                    "bullet": "false",
                                    "fillAlphas": 1,
                                    "lineColor": ["#1de9b6", "#1dc4e9"],
                                    "valueField": "value"
                                }],
                                "categoryField": "direction",
                            });
                        });
                    </script>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card theme-bg2">
                        <div class="card-header borderless">
                            <h5 class="text-white">Stats</h5>
                        </div>
                        <div class="card-block">
                            <div class="row">
                                <div class="col-md-4 col-6 text-center m-b-10">
                                    <h3 class="text-white f-w-300">932</h3>
                                    <span class="d-block text-white">This Month</span>
                                </div>
                                <div class="col-md-4 col-6 text-center m-b-10">
                                    <h3 class="text-white f-w-300">85</h3>
                                    <span class="d-block text-white">This Week</span>
                                </div>
                                <div class="col-md-4 col-12 text-center m-b-10">
                                    <h3 class="text-white f-w-300">26</h3>
                                    <span class="d-block text-white">Today</span>
                                </div>
                            </div>
                        </div>
                        <div id="sitevisite-chart" class="last-week-sales" style="height:250px;"></div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var chartData = [{
                                "year": "1999",
                                "value": 20
                            }, {
                                "year": "2000",
                                "value": 25
                            }, {
                                "year": "2001",
                                "value": 30
                            }, {
                                "year": "2002",
                                "value": 28
                            }, {
                                "year": "2003",
                                "value": 25
                            }, {
                                "year": "2004",
                                "value": 28
                            }, {
                                "year": "2005",
                                "value": 30
                            }];

                            var chart1 = AmCharts.makeChart("sitevisite-chart", {
                                "type": "serial",
                                "addClassNames": true,
                                "defs": {
                                    "filter": [{
                                            "x": "-50%",
                                            "y": "-50%",
                                            "width": "200%",
                                            "height": "200%",
                                            "id": "blur",
                                            "feGaussianBlur": {
                                                "in": "SourceGraphic",
                                                "stdDeviation": "30"
                                            }
                                        },
                                        {
                                            "id": "shadow",
                                            "x": "-10%",
                                            "y": "-10%",
                                            "width": "120%",
                                            "height": "120%",
                                            "feOffset": {
                                                "result": "offOut",
                                                "in": "SourceAlpha",
                                                "dx": "0",
                                                "dy": "20"
                                            },
                                            "feGaussianBlur": {
                                                "result": "blurOut",
                                                "in": "offOut",
                                                "stdDeviation": "10"
                                            },
                                            "feColorMatrix": {
                                                "result": "blurOut",
                                                "type": "matrix",
                                                "values": "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .2 0"
                                            },
                                            "feBlend": {
                                                "in": "SourceGraphic",
                                                "in2": "blurOut",
                                                "mode": "normal"
                                            }
                                        }
                                    ]
                                },
                                "fontSize": 15,
                                "dataProvider": chartData,
                                "dataDateFormat": "YYYY",
                                "autoMarginOffset": 0,
                                "marginRight": 0,
                                "categoryField": "year",
                                "categoryAxis": {
                                    "color": '#fff',
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "lineAlpha": 0,
                                    "offset": -20,
                                    "inside": true,
                                    "parseDates": true,
                                    "minPeriod": "YYYY"
                                },
                                "chartCursor": {
                                    "valueLineEnabled": false,
                                    "valueLineBalloonEnabled": false,
                                    "cursorAlpha": 0,
                                    "zoomable": false,
                                    "cursorColor": "#fff",
                                    "categoryBalloonColor": "#899ed4",
                                    "valueZoomable": false,
                                    "valueLineAlpha": 0
                                },
                                "valueAxes": [{
                                    "fontSize": 0,
                                    "inside": true,
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "lineAlpha": 0,
                                }],
                                "graphs": [{
                                    "id": "g1",
                                    "type": "line",
                                    "valueField": "value",
                                    "type": "smoothedLine",
                                    "lineColor": '#fff',
                                    "fillColors": [
                                        "#a389d4",
                                        "transparent"
                                    ],
                                    "lineAlpha": 1,
                                    "lineThickness": 5,
                                    "fillAlphas": 0.3,
                                    "showBalloon": true,
                                    "balloon": {
                                        "drop": true,
                                        "adjustBorderColor": false,
                                        "color": "#ffffff",
                                        "fillAlphas": 0.2,
                                        "bullet": "round",
                                        "bulletBorderAlpha": 1,
                                        "bulletSize": 5,
                                        "hideBulletsCount": 50,
                                        "lineThickness": 2,
                                        "useLineColorForBulletBorder": true,
                                        "valueField": "value",
                                        "balloonText": "<span style='font-size:18px;'>[[value]]</span>"
                                    },
                                }],
                            });
                            setTimeout(function() {
                                chart1.zoomToIndexes(1, chartData.length - 3);
                            }, 400);
                        });
                    </script>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card bg-c-blue">
                        <div class="card-header borderless">
                            <h5 class="text-white">Statistics</h5>
                        </div>
                        <div class="card-block">
                            <div id="Statistics-sale" class="last-week-sales" style="height:300px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var chartData = [{
                                "year": "2001",
                                "bicycles": 55
                            }, {
                                "year": "2002",
                                "bicycles": 40
                            }, {
                                "year": "2003",
                                "bicycles": 50
                            }];
                            var chart = AmCharts.makeChart("Statistics-sale", {
                                "type": "serial",
                                "theme": "light",
                                "autoMargins": false,
                                "addClassNames": true,
                                "zoomOutText": "",
                                "defs": {
                                    "filter": [{
                                        "id": "shadow",
                                        "width": "150%",
                                        "height": "150%",
                                        "feOffset": {
                                            "result": "offOut",
                                            "in": "SourceAlpha",
                                            "dx": "2",
                                            "dy": "2"
                                        },
                                        "feGaussianBlur": {
                                            "result": "blurOut",
                                            "in": "offOut",
                                            "stdDeviation": "10"
                                        },
                                        "feColorMatrix": {
                                            "result": "blurOut",
                                            "type": "matrix",
                                            "values": "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .2 0"
                                        },
                                        "feBlend": {
                                            "in": "SourceGraphic",
                                            "in2": "blurOut",
                                            "mode": "normal"
                                        }
                                    }]
                                },
                                "fontSize": 15,
                                "pathToImages": "../amcharts/images/",
                                "dataProvider": chartData,
                                "dataDateFormat": "YYYY",
                                "marginTop": 10,
                                "marginRight": 0,
                                "marginLeft": 0,
                                "autoMarginOffset": 5,
                                "categoryField": "year",
                                "categoryAxis": {
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "startOnAxis": true,
                                    "tickLength": 0,
                                    "color": "#fff",
                                    "parseDates": true,
                                    "minPeriod": "YYYY",
                                    "offset": 0,
                                    "inside": true,
                                },
                                "valueAxes": [{
                                    "fontSize": 0,
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "minimum": 0,
                                    "maximum": 100,
                                }],
                                "graphs": [{
                                    "id": "g3",
                                    "title": "Bicycles",
                                    "valueField": "bicycles",
                                    "lineAlpha": 1,
                                    "lineColor": "#FFFFFF",
                                    "lineThickness": 3,
                                    "bullet": "round",
                                    "bulletBorderAlpha": 3,
                                    "bulletAlpha": 1,
                                    "bulletSize": 8,
                                    "stackable": false,
                                    "bulletColor": "#04A5F5",
                                    "bulletBorderColor": "#fff",
                                    "bulletBorderThickness": 3,
                                    "balloonText": "<div style='margin-bottom:30px;text-shadow: 2px 2px rgba(0, 0, 0, 0.1); font-weight:200;font-size:30px; color:#ffffff'>[[value]]</div>"
                                }],
                                "chartCursor": {
                                    "cursorAlpha": 1,
                                    "fontSize": 0,
                                    "zoomable": false,
                                    "cursorColor": "#fff",
                                    "categoryBalloonColor": "#04A5F5",
                                    "fullWidth": true,
                                    "categoryBalloonDateFormat": "YYYY",
                                    "balloonPointerOrientation": "vertical"
                                },
                                "balloon": {
                                    "borderAlpha": 0,
                                    "fillAlpha": 0,
                                    "shadowAlpha": 0,
                                    "offsetX": 40,
                                    "offsetY": -50
                                }
                            });

                        });
                    </script>
                </div>
                <div class="col-xl-8 col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Users from United States</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div id="world-low" style="height:350px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var latlong = {};
                            latlong["AU"] = {
                                "latitude": -27,
                                "longitude": 133
                            };
                            latlong["BR"] = {
                                "latitude": -10,
                                "longitude": -55
                            };
                            latlong["BW"] = {
                                "latitude": -22,
                                "longitude": 24
                            };
                            latlong["IN"] = {
                                "latitude": 20,
                                "longitude": 77
                            };
                            latlong["KE"] = {
                                "latitude": 1,
                                "longitude": 38
                            };
                            latlong["MX"] = {
                                "latitude": 23,
                                "longitude": -102
                            };
                            latlong["MY"] = {
                                "latitude": 2.5,
                                "longitude": 112.5
                            };
                            latlong["NI"] = {
                                "latitude": 13,
                                "longitude": -85
                            };
                            latlong["NZ"] = {
                                "latitude": -41,
                                "longitude": 174
                            };
                            latlong["PH"] = {
                                "latitude": 13,
                                "longitude": 122
                            };
                            latlong["PL"] = {
                                "latitude": 52,
                                "longitude": 20
                            };
                            latlong["RU"] = {
                                "latitude": 60,
                                "longitude": 100
                            };
                            latlong["TH"] = {
                                "latitude": 15,
                                "longitude": 100
                            };
                            latlong["ZA"] = {
                                "latitude": -29,
                                "longitude": 24
                            };

                            var mapData = [{
                                    "code": "MX",
                                    "name": "Mexico",
                                    "value": 114793341,
                                    "color": "#a389d4"
                                },
                                {
                                    "code": "BR",
                                    "name": "Brazil",
                                    "value": 196655014,
                                    "color": "#1de9b6"
                                },
                                {
                                    "code": "PL",
                                    "name": "Poland",
                                    "value": 38298949,
                                    "color": "#f44236"
                                },
                                {
                                    "code": "KE",
                                    "name": "Kenya",
                                    "value": 41609728,
                                    "color": "#1dc4e9"
                                },
                                {
                                    "code": "ZA",
                                    "name": "South Africa",
                                    "value": 50459978,
                                    "color": "#f4c22b"
                                },
                                {
                                    "code": "RU",
                                    "name": "Russia",
                                    "value": 142835555,
                                    "color": "#f4c22b"
                                },
                                {
                                    "code": "IN",
                                    "name": "India",
                                    "value": 241491960,
                                    "color": "#1de9b6"
                                },
                                {
                                    "code": "PH",
                                    "name": "Philippines",
                                    "value": 94852030,
                                    "color": "#04a9f5"
                                },
                                {
                                    "code": "AU",
                                    "name": "Australia",
                                    "value": 22605732,
                                    "color": "#1dc4e9"
                                },
                                {
                                    "code": "TH",
                                    "name": "Thailand",
                                    "value": 69518555,
                                    "color": "#f44236"
                                },
                                {
                                    "code": "BW",
                                    "name": "Botswana",
                                    "value": 2030738,
                                    "color": "#04a9f5"
                                },
                                {
                                    "code": "MY",
                                    "name": "Malaysia",
                                    "value": 28859154,
                                    "color": "#A389D4"
                                },
                                {
                                    "code": "NZ",
                                    "name": "New Zealand",
                                    "value": 4414509,
                                    "color": "#04a9f5"
                                },
                                {
                                    "code": "NI",
                                    "name": "Nicaragua",
                                    "value": 5869859,
                                    "color": "#A389D4"
                                }
                            ];

                            var minBulletSize = 3;
                            var maxBulletSize = 70;
                            var min = Infinity;
                            var max = -Infinity;
                            for (var i = 0; i < mapData.length; i++) {
                                var value = mapData[i].value;
                                if (value < min) {
                                    min = value;
                                }
                                if (value > max) {
                                    max = value;
                                }
                            }

                            var maxSquare = maxBulletSize * maxBulletSize * 2 * Math.PI;
                            var minSquare = minBulletSize * minBulletSize * 2 * Math.PI;

                            var images = [];
                            for (var i = 0; i < mapData.length; i++) {
                                var dataItem = mapData[i];
                                var value = dataItem.value;

                                var square = (value - min) / (max - min) * (maxSquare - minSquare) + minSquare;
                                if (square < minSquare) {
                                    square = minSquare;
                                }
                                var size = Math.sqrt(square / (Math.PI * 8));
                                var id = dataItem.code;

                                images.push({
                                    "type": "circle",
                                    "theme": "light",
                                    "width": size,
                                    "height": size,
                                    "color": dataItem.color,
                                    "longitude": latlong[id].longitude,
                                    "latitude": latlong[id].latitude,
                                    "title": dataItem.name + "</br> [ " + value + " ]",
                                    "value": value
                                });
                            }
                            var map = AmCharts.makeChart("world-low", {
                                "type": "map",
                                "projection": "eckert6",

                                "dataProvider": {
                                    "map": "worldLow",
                                    "images": images
                                },
                                "export": {
                                    "enabled": true
                                }
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Phone Calls</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div id="call-chart" style="height:350px;"></div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var chartDatac = [{
                                "year": "2000",
                                "value": 55
                            }, {
                                "year": "2001",
                                "value": 45
                            }, {
                                "year": "2002",
                                "value": 60
                            }, {
                                "year": "2003",
                                "value": 80
                            }, {
                                "year": "2004",
                                "value": 70
                            }, {
                                "year": "2005",
                                "value": 55
                            }];
                            var chartc = AmCharts.makeChart("call-chart", {
                                "type": "serial",
                                "addClassNames": true,
                                "defs": {
                                    "filter": [{
                                            "x": "-50%",
                                            "y": "-50%",
                                            "width": "200%",
                                            "height": "200%",
                                            "id": "blur",
                                            "feGaussianBlur": {
                                                "in": "SourceGraphic",
                                                "stdDeviation": "30"
                                            }
                                        },
                                        {
                                            "id": "shadow",
                                            "x": "-10%",
                                            "y": "-10%",
                                            "width": "120%",
                                            "height": "120%",
                                            "feOffset": {
                                                "result": "offOut",
                                                "in": "SourceAlpha",
                                                "dx": "0",
                                                "dy": "20"
                                            },
                                            "feGaussianBlur": {
                                                "result": "blurOut",
                                                "in": "offOut",
                                                "stdDeviation": "10"
                                            },
                                            "feColorMatrix": {
                                                "result": "blurOut",
                                                "type": "matrix",
                                                "values": "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .2 0"
                                            },
                                            "feBlend": {
                                                "in": "SourceGraphic",
                                                "in2": "blurOut",
                                                "mode": "normal"
                                            }
                                        }
                                    ]
                                },
                                "fontSize": 15,
                                "dataProvider": chartDatac,
                                "autoMarginOffset": 0,
                                "marginRight": 0,
                                "categoryField": "year",
                                "categoryAxis": {
                                    "color": '#fff',
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "lineAlpha": 0,
                                    "offset": -20,
                                    "inside": true,
                                    "parseDates": true,
                                    "minPeriod": "YYYY"
                                },
                                "valueAxes": [{
                                    "fontSize": 0,
                                    "inside": true,
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "lineAlpha": 0,
                                    "minimum": 0,
                                    "maximum": 100,
                                }],
                                "chartCursor": {
                                    "valueLineEnabled": false,
                                    "valueLineBalloonEnabled": false,
                                    "cursorAlpha": 0,
                                    "zoomable": false,
                                    "valueZoomable": false,
                                    "cursorColor": "#fff",
                                    "categoryBalloonColor": "#95ead5",
                                    "valueLineAlpha": 0
                                },
                                "graphs": [{
                                    "id": "g1",
                                    "type": "line",
                                    "type": "smoothedLine",
                                    "valueField": "value",
                                    "fillColors": [
                                        "#1de9b6",
                                        "#1dc4e9"
                                    ],
                                    "lineAlpha": 0,
                                    "fillAlphas": 1,
                                    "showBalloon": true,
                                    "balloon": {
                                        "drop": true,
                                        "adjustBorderColor": false,
                                        "color": "#ffffff",
                                        "fillAlphas": 0.2,
                                        "bullet": "round",
                                        "bulletBorderAlpha": 1,
                                        "bulletSize": 5,
                                        "hideBulletsCount": 50,
                                        "lineThickness": 2,
                                        "useLineColorForBulletBorder": true,
                                        "valueField": "value",
                                        "balloonText": "<span style='font-size:18px;'>[[value]]</span>"
                                    },
                                }, ],
                            });
                            setTimeout(function() {
                                chartc.zoomToIndexes(1, chartDatac.length - 2);
                            }, 400);
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-sm-12 datta-example">
                    <div class="card progress-gender">
                        <div class="card-header">
                            <h5 class="mb-2">Gender</h5>
                            <span class="text-muted d-block">325 Employees</span>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <h6 class="m-b-10">Female <span class="float-right">Male</span></h6>
                            <div class="progress">
                                <div class="progress-bar progress-c-theme2" role="progressbar" style="width: 30%; height:10px;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                                <div class="progress-bar progress-c-theme" role="progressbar" style="width: 30%; height:10px;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <h5 class="f-w-300 m-t-20  text-muted">62%<span class="float-right">28%</span></h5>
                            <h6 class="m-b-10 m-t-20">Female <span class="float-right">Male</span></h6>
                            <div class="progress">
                                <div class="progress-bar progress-c-theme2" role="progressbar" style="width: 40%; height:10px;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                                <div class="progress-bar progress-c-theme" role="progressbar" style="width: 30%; height:10px;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <h5 class="f-w-300 m-t-20  text-muted">60%<span class="float-right">50%</span></h5>
                            <h6 class="m-b-10 m-t-20">Female <span class="float-right">Male</span></h6>
                            <div class="progress">
                                <div class="progress-bar progress-c-theme2" role="progressbar" style="width: 50%; height:10px;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                <div class="progress-bar progress-c-theme" role="progressbar" style="width: 50%; height:10px;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <h5 class="f-w-300 m-t-20  text-muted">50%<span class="float-right">50%</span></h5>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-2">Age</h5>
                            <span class="text-muted d-block">Average 40+</span>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div id="Stack-age" class="Stackchart" style="height:250px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var chart = AmCharts.makeChart("Stack-age", {
                                "type": "serial",
                                "theme": "light",
                                "dataProvider": [{
                                    "age": "<20",
                                    "visits": 30,
                                    "color": ["#1de9b6", "#1dc4e9"]
                                }, {
                                    "age": "30",
                                    "visits": 35,
                                    "color": ["#899FD4", "#A389D4"]
                                }, {
                                    "age": "40",
                                    "visits": 40,
                                    "color": ["#1de9b6", "#1dc4e9"]
                                }, {
                                    "age": "50",
                                    "visits": 30,
                                    "color": ["#899FD4", "#A389D4"]
                                }, {
                                    "age": "60",
                                    "visits": 32,
                                    "color": ["#1de9b6", "#1dc4e9"]
                                }, {
                                    "age": ">70",
                                    "visits": 38,
                                    "color": ["#899FD4", "#A389D4"]
                                }],
                                "valueAxes": [{
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "lineAlpha": 0,
                                    "fontSize": 0,
                                }],
                                "startDuration": 1,
                                "graphs": [{
                                    "balloonText": "<b>[[category]]: [[value]]</b>",
                                    "fillColorsField": "color",
                                    "fillAlphas": 0.9,
                                    "lineAlpha": 0.2,
                                    "columnWidth": 0.2,
                                    "type": "column",
                                    "valueField": "visits"
                                }],
                                "chartCursor": {
                                    "categoryBalloonEnabled": false,
                                    "cursorAlpha": 0,
                                    "zoomable": false
                                },
                                "categoryField": "age",
                                "categoryAxis": {
                                    "gridPosition": "start",
                                    "gridAlpha": 0,
                                    "axisAlpha": 0,
                                    "lineAlpha": 0,
                                }
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-8 col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Statistics</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div id="Statistics-line" class="ChartShadow" style="height:450px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var chart = AmCharts.makeChart("Statistics-line", {
                                "type": "serial",
                                "theme": "light",
                                "marginTop": 10,
                                "marginRight": 0,
                                "dataProvider": [{
                                    "year": "2014",
                                    "value": 30
                                }, {
                                    "year": "2015",
                                    "value": 60
                                }, {
                                    "year": "2016",
                                    "value": 50
                                }, {
                                    "year": "2017",
                                    "value": 70
                                }],
                                "valueAxes": [{
                                    "axisAlpha": 0,
                                    "minimum": 0,
                                    "maximum": 100,
                                    "position": "left"
                                }],
                                "graphs": [{
                                    "id": "g1",
                                    "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
                                    "bullet": "round",
                                    "bulletSize": 5,
                                    "lineColor": "#1dc4e9",
                                    "lineThickness": 5,
                                    "valueField": "value"
                                }],
                                "chartCursor": {
                                    "categoryBalloonDateFormat": "YYYY",
                                    "cursorAlpha": 0,
                                    "valueLineEnabled": true,
                                    "valueLineBalloonEnabled": true,
                                    "valueLineAlpha": 0.5,
                                    "fullWidth": true
                                },
                                "dataDateFormat": "YYYY",
                                "categoryField": "year",
                                "categoryAxis": {
                                    "minPeriod": "YYYY",
                                    "parseDates": true,
                                    "minorGridAlpha": 0.1,
                                    "gridColor": '#fff',
                                    "minorGridEnabled": true
                                },
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Reviews</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div class="row">
                                <div class="col-sm-6 text-center m-b-20">
                                    <h6 class="pb-4 d-block">NEGATIVE</h6>
                                    <div class="sadball"></div>
                                    <h3 class="font-weight-light mt-2">26%</h3>
                                    <span class="b-block pt-2">57 Reviews</span>
                                </div>
                                <div class="col-sm-6 text-center m-b-20">
                                    <h6 class="pb-4 d-block">POSITIVE</h6>
                                    <div class="happyball"></div>
                                    <h3 class="font-weight-light mt-2">74%</h3>
                                    <span class="b-block pt-2">567 Reviews</span>
                                </div>
                                <div class="col-sm-12">
                                    <button class="btn btn-primary shadow-2 text-uppercase btn-block mt-3 mr-0" type="button">view all reviews</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var loadingEle = $('.loading');
                            $('.sadball').createWaterBall({
                                cvs_config: {
                                    width: 110,
                                    height: 110
                                },
                                wave_config: {
                                    waveWidth: 0.025,
                                    waveHeight: 3
                                },
                                data_range: [30, 70, 100],
                                isLoading: true,
                                nowRange: 26,
                                targetRange: 26
                            });
                            $('.happyball').createWaterBall({
                                cvs_config: {
                                    width: 110,
                                    height: 110
                                },
                                wave_config: {
                                    waveWidth: 0.025,
                                    waveHeight: 3
                                },
                                data_range: [30, 70, 100],
                                isLoading: true,
                                nowRange: 74,
                                targetRange: 74
                            });
                            setTimeout(function() {
                                $('.sadball').createWaterBall('updateRange', 26);
                                $('.happyball').createWaterBall('updateRange', 74);
                            }, 1000);
                        });
                    </script>
                </div>


            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Am chart4 Js --&gt;
                    &lt;script src="assets/plugins/amchart/js/amcharts.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/amchart/js/gauge.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/amchart/js/serial.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/amchart/js/light.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/amchart/js/pie.min.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/amchart/js/ammap.min.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/amchart/js/usaLow.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/amchart/js/radar.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/amchart/js/worldLow.js"&gt;&lt;/script&gt;<br>
                    &lt;!-- WaterBall Js --&gt;
                    &lt;script src="assets/plugins/waterball/js/createWaterBall-jquery.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-floatchart">Float chart</h2>
            <div class="row">
                <div class="col-xl-8 col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Last 3 Days</h5>
                            <div class="card-header-right">
                                <div class="btn-group card-option">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="feather icon-more-horizontal"></i>
                                    </button>
                                    <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                        <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                        <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                        <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                        <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div class="row">
                                <div class="col-md-4 col-6 text-center m-b-15">
                                    <h3 class="f-w-300">$ 32,42</h3>
                                    <span class="text-right">Mon <strong>+5,93</strong></span>
                                </div>

                                <div class="col-md-4 col-6 text-center m-b-15">
                                    <h3 class="f-w-300">$ 28,36</h3>
                                    <span class="text-right">Tue <strong>-4,24</strong></span>
                                </div>

                                <div class="col-md-4 col-12 text-center m-b-15">
                                    <h3 class="f-w-300">$ 59,48</h3>
                                    <span class="text-right">Wed <strong>+12,25</strong></span>
                                </div>
                            </div>
                        </div>
                        <div id="processed-bar" style="height:200px"></div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                floatchart()
                            }, 700);
                            $(window).on('resize', function() {
                                floatchart();
                            });
                            $('#mobile-collapse').on('click', function() {
                                setTimeout(function() {
                                    floatchart();
                                }, 700);
                            });

                            function floatchart() {
                                $(function() {
                                    $.plot($("#processed-bar"), [{
                                        data: [
                                            [0, 30],
                                            [20, 45],
                                            [50, 30],
                                            [80, 45],
                                            [100, 30]
                                        ],
                                        color: "#1dc4e9",
                                        lines: {
                                            show: true,
                                            fill: true,
                                            lineWidth: 0,
                                            fillColor: {
                                                colors: [{
                                                        opacity: 0.9
                                                    },
                                                    {
                                                        opacity: 0.1
                                                    }
                                                ]
                                            },
                                        },
                                        points: {
                                            show: false,
                                            radius: 3,
                                            fill: true
                                        },
                                        curvedLines: {
                                            apply: false,
                                        }
                                    }], {
                                        series: {
                                            label: "",
                                            curvedLines: {
                                                active: true,
                                                nrSplinePoints: 0
                                            },
                                        },
                                        tooltip: {
                                            show: true,
                                            content: "x : %x | y : %y"
                                        },
                                        grid: {
                                            hoverable: true,
                                            borderWidth: 0,
                                            labelMargin: 0,
                                            axisMargin: 0,
                                            minBorderMargin: 0,
                                        },
                                        yaxis: {
                                            min: 0,
                                            max: 50,
                                            color: 'transparent',
                                            font: {
                                                size: 0,
                                            }
                                        },
                                        xaxis: {
                                            color: 'transparent',
                                            font: {
                                                size: 0,
                                            }
                                        }
                                    });
                                });
                            }
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-block user-chart">
                            <div class="row align-items-center justify-content-center">
                                <div class="col-auto">
                                    <i class="fas fa-chart-line f-30"></i>
                                </div>
                                <div class="col text-center">
                                    <img class="img-fluid rounded-circle" src="assets/images/user/avatar-1.jpg" alt="dashboard-user">
                                </div>
                                <div class="col-auto">
                                    <i class="far fa-envelope f-30"></i>
                                </div>
                            </div>
                            <h5 class="m-t-30 text-center">Alma Christensen</h5>
                            <span class="text-center d-block">UX Designer</span>
                            <div class="row m-t-40">
                                <div class="col">
                                    <div id="power-card-chart" class="ChartShadow" style="height:115px"></div>
                                </div>
                                <div class="col-auto">
                                    <h3 class="f-w-300"><i class="fas fa-caret-up text-c-green f-22 m-r-10 m-l-10"></i>13 %</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                floatchart()
                            }, 700);
                            $(window).on('resize', function() {
                                floatchart();
                            });
                            $('#mobile-collapse').on('click', function() {
                                setTimeout(function() {
                                    floatchart();
                                }, 700);
                            });

                            function floatchart() {
                                $(function() {
                                    $.plot($("#power-card-chart"), [{
                                        data: [
                                            [0, 50],
                                            [20, 70],
                                            [35, 45],
                                            [50, 73],
                                            [65, 85],
                                        ],
                                        color: "#1dc4e9",
                                        lines: {
                                            show: true,
                                            fill: false,
                                            lineWidth: 3,

                                        },
                                        points: {
                                            show: false,
                                            radius: 3,
                                            fill: true
                                        },
                                        curvedLines: {
                                            apply: true
                                        }
                                    }], {
                                        series: {
                                            label: "",
                                            curvedLines: {
                                                active: true
                                            },
                                        },
                                        tooltip: {
                                            show: true,
                                            content: "x : %x | y : %y"
                                        },
                                        grid: {
                                            hoverable: true,
                                            borderWidth: 0,
                                            labelMargin: 0,
                                            axisMargin: 0,
                                            minBorderMargin: 0,
                                        },
                                        yaxis: {
                                            min: 0,
                                            max: 90,
                                            color: 'transparent',
                                            font: {
                                                size: 0,
                                            }
                                        },
                                        xaxis: {
                                            color: 'transparent',
                                            font: {
                                                size: 0,
                                            }
                                        }
                                    });
                                });
                            }
                        });
                    </script>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Transactions</h5>
                            <span class="d-block pt-2">Jun 23 - Jul 23</span>
                        </div>
                        <div class="card-block">
                            <div class="row align-items-center justify-content-center">
                                <div class="col-6">
                                    <h3 class="f-w-300 mb-0 float-left">$ 59,48</h3>
                                </div>
                                <div class="col-6">
                                    <div id="transactions" class="float-right" style="height:80px;width:80px;margin:0 auto;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                floatchart()
                            }, 700);
                            $(window).on('resize', function() {
                                floatchart();
                            });
                            $('#mobile-collapse').on('click', function() {
                                setTimeout(function() {
                                    floatchart();
                                }, 700);
                            });

                            function floatchart() {
                                $(function() {
                                    $.plot($("#transactions"), [{
                                        data: [
                                            [0, 48],
                                            [1, 30],
                                            [2, 25],
                                            [3, 30],
                                            [4, 20],
                                            [5, 40],
                                            [6, 30],
                                        ],
                                        color: "#1dc4e9",
                                        bars: {
                                            show: true,
                                            lineWidth: 1,
                                            fill: true,
                                            fillColor: {
                                                colors: [{
                                                    opacity: 1
                                                }, {
                                                    opacity: 1
                                                }]
                                            },
                                            barWidth: 0.2,
                                            align: 'center',
                                            horizontal: false
                                        },
                                        points: {
                                            show: false,
                                            radius: 3,
                                            fill: true
                                        },
                                        curvedLines: {
                                            apply: false,
                                        }
                                    }], {
                                        series: {
                                            label: "",
                                            curvedLines: {
                                                active: true,
                                                nrSplinePoints: 0
                                            },
                                        },
                                        tooltip: {
                                            show: true,
                                            content: "x : %x | y : %y"
                                        },
                                        grid: {
                                            hoverable: true,
                                            borderWidth: 0,
                                            labelMargin: 0,
                                            axisMargin: 0,
                                            minBorderMargin: 0,
                                        },
                                        yaxis: {
                                            min: 0,
                                            max: 50,
                                            color: 'transparent',
                                            font: {
                                                size: 0,
                                            }
                                        },
                                        xaxis: {
                                            color: 'transparent',
                                            font: {
                                                size: 0,
                                            }
                                        }
                                    });
                                });
                            }
                        });
                    </script>
                </div>
                <div class="col-md-6 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Transactions</h5>
                            <span class="d-block pt-2">June - July</span>
                        </div>
                        <div class="card-block">
                            <div class="row">
                                <div class="col-6">
                                    <div id="transactions1" style="height:50px;width:80px;margin:0 auto;"></div>
                                    <h3 class="f-w-300 pt-3 mb-0 text-center">$ 80,48</h3>
                                </div>

                                <div class="col-6">
                                    <div id="transactions2" style="height:50px;width:80px;margin:0 auto;"></div>
                                    <h3 class="f-w-300 pt-3 mb-0 text-center">$ 40,27</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        // transactions1
                        $(document).ready(function() {
                            setTimeout(function() {
                                floatchart()
                            }, 700);
                            $(window).on('resize', function() {
                                floatchart();
                            });
                            $('#mobile-collapse').on('click', function() {
                                setTimeout(function() {
                                    floatchart();
                                }, 700);
                            });

                            function floatchart() {
                                $(function() {
                                    $.plot($("#transactions1"), [{
                                        data: [
                                            [0, 48],
                                            [1, 30],
                                            [2, 25],
                                            [3, 30],
                                            [4, 20],
                                            [5, 40],
                                            [6, 30],
                                        ],
                                        color: "#a389d4",
                                        bars: {
                                            show: true,
                                            lineWidth: 1,
                                            fill: true,
                                            fillColor: {
                                                colors: [{
                                                    opacity: 1
                                                }, {
                                                    opacity: 1
                                                }]
                                            },
                                            barWidth: 0.2,
                                            align: 'center',
                                            horizontal: false
                                        },
                                        points: {
                                            show: false,
                                            radius: 3,
                                            fill: true
                                        },
                                        curvedLines: {
                                            apply: false,
                                        }
                                    }], {
                                        series: {
                                            label: "",
                                            curvedLines: {
                                                active: true,
                                                nrSplinePoints: 0
                                            },
                                        },
                                        tooltip: {
                                            show: true,
                                            content: "x : %x | y : %y"
                                        },
                                        grid: {
                                            hoverable: true,
                                            borderWidth: 0,
                                            labelMargin: 0,
                                            axisMargin: 0,
                                            minBorderMargin: 0,
                                        },
                                        yaxis: {
                                            min: 0,
                                            max: 50,
                                            color: 'transparent',
                                            font: {
                                                size: 0,
                                            }
                                        },
                                        xaxis: {
                                            color: 'transparent',
                                            font: {
                                                size: 0,
                                            }
                                        }
                                    });
                                });
                            }
                        });
                        //transactions2
                        $(document).ready(function() {
                            setTimeout(function() {
                                floatchart()
                            }, 700);
                            $(window).on('resize', function() {
                                floatchart();
                            });
                            $('#mobile-collapse').on('click', function() {
                                setTimeout(function() {
                                    floatchart();
                                }, 700);
                            });

                            function floatchart() {
                                $(function() {
                                    $.plot($("#transactions2"), [{
                                        data: [
                                            [0, 44],
                                            [1, 26],
                                            [2, 22],
                                            [3, 35],
                                            [4, 28],
                                            [5, 35],
                                            [6, 28],
                                        ],
                                        color: "#1dc4e9",
                                        bars: {
                                            show: true,
                                            lineWidth: 1,
                                            fill: true,
                                            fillColor: {
                                                colors: [{
                                                    opacity: 1
                                                }, {
                                                    opacity: 1
                                                }]
                                            },
                                            barWidth: 0.2,
                                            align: 'center',
                                            horizontal: false
                                        },
                                        points: {
                                            show: false,
                                            radius: 3,
                                            fill: true
                                        },
                                        curvedLines: {
                                            apply: false,
                                        }
                                    }], {
                                        series: {
                                            label: "",
                                            curvedLines: {
                                                active: true,
                                                nrSplinePoints: 0
                                            },
                                        },
                                        tooltip: {
                                            show: true,
                                            content: "x : %x | y : %y"
                                        },
                                        grid: {
                                            hoverable: true,
                                            borderWidth: 0,
                                            labelMargin: 0,
                                            axisMargin: 0,
                                            minBorderMargin: 0,
                                        },
                                        yaxis: {
                                            min: 0,
                                            max: 50,
                                            color: 'transparent',
                                            font: {
                                                size: 0,
                                            }
                                        },
                                        xaxis: {
                                            color: 'transparent',
                                            font: {
                                                size: 0,
                                            }
                                        }
                                    });
                                });
                            }
                        });
                    </script>
                </div>
                <div class="col-md-12 col-xl-4 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Transactions</h5>
                            <span class="d-block pt-2">Jun 23 - Jul 23</span>
                        </div>
                        <div class="card-block">
                            <div class="row align-items-center justify-content-center">
                                <div class="col-6">
                                    <div id="transactions3" class="float-left" style="height:80px;width:80px;margin:0 auto;"></div>
                                </div>
                                <div class="col-6">
                                    <h3 class="f-w-300 mb-0 float-right">$ 59,48</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                floatchart()
                            }, 700);
                            $(window).on('resize', function() {
                                floatchart();
                            });
                            $('#mobile-collapse').on('click', function() {
                                setTimeout(function() {
                                    floatchart();
                                }, 700);
                            });

                            function floatchart() {
                                $(function() {
                                    $.plot($("#transactions3"), [{
                                        data: [
                                            [0, 40],
                                            [1, 30],
                                            [2, 25],
                                            [3, 38],
                                            [4, 30],
                                            [5, 38],
                                            [6, 30],
                                        ],
                                        color: "#1dc4e9",
                                        bars: {
                                            show: true,
                                            lineWidth: 1,
                                            fill: true,
                                            fillColor: {
                                                colors: [{
                                                    opacity: 1
                                                }, {
                                                    opacity: 1
                                                }]
                                            },
                                            barWidth: 0.2,
                                            align: 'center',
                                            horizontal: false
                                        },
                                        points: {
                                            show: false,
                                            radius: 3,
                                            fill: true
                                        },
                                        curvedLines: {
                                            apply: false,
                                        }
                                    }], {
                                        series: {
                                            label: "",
                                            curvedLines: {
                                                active: true,
                                                nrSplinePoints: 0
                                            },
                                        },
                                        tooltip: {
                                            show: true,
                                            content: "x : %x | y : %y"
                                        },
                                        grid: {
                                            hoverable: true,
                                            borderWidth: 0,
                                            labelMargin: 0,
                                            axisMargin: 0,
                                            minBorderMargin: 0,
                                        },
                                        yaxis: {
                                            min: 0,
                                            max: 50,
                                            color: 'transparent',
                                            font: {
                                                size: 0,
                                            }
                                        },
                                        xaxis: {
                                            color: 'transparent',
                                            font: {
                                                size: 0,
                                            }
                                        }
                                    });
                                });
                            }
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Markets</h5>
                        </div>
                        <div class="card-block">
                            <div class="media">
                                <div class="photo-table">
                                    <h6 class="text-muted">Dash/USD<span class="text-c-green ml-3">2.56%</span></h6>
                                    <h6>1,0452 <span class="ml-2"> USD</span></h6>
                                </div>
                                <div class="media-body">
                                    <div id="app-sale" class="float-right" style="height:40px;width:100px"></div>
                                </div>
                            </div>
                            <div class="media mt-4">
                                <div class="photo-table">
                                    <h6 class="text-muted">ETH/USD<span class="text-c-red ml-3">-0.87%</span></h6>
                                    <h6>0,0157<span class="ml-2"> USD</span></h6>
                                </div>
                                <div class="media-body">
                                    <div id="app-eth" class="float-right" style="height:40px;width:100px">
                                    </div>
                                </div>
                            </div>
                            <div class="media mt-4">
                                <div class="photo-table">
                                    <h6 class="text-muted">ZEC/USD<span class="text-c-purple ml-3">1.56%</span></h6>
                                    <h6>2,0764<span class="ml-2"> USD</span></h6>
                                </div>
                                <div class="media-body">
                                    <div id="app-usd" class="float-right" style="height:40px;width:100px">
                                    </div>
                                </div>
                            </div>
                            <div class="media mt-4">
                                <div class="photo-table">
                                    <h6 class="text-muted">BTC/USD<span class="text-c-green ml-3">2.56%</span></h6>
                                    <h6>1,0452<span class="ml-2"> USD</span></h6>
                                </div>
                                <div class="media-body">
                                    <div id="app-btc" class="float-right" style="height:40px;width:100px">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <script type="text/javascript">
                            $(document).ready(function() {
                                // [ flot options ]
                                $.plot($("#app-sale"), [{
                                    data: [
                                        [0, 10],
                                        [2, 27],
                                        [4, 10],
                                        [6, 10],
                                        [8, 27],
                                        [10, 20],
                                        [12, 20],
                                    ],
                                    color: "#1DE3BE",
                                    lines: {
                                        show: true,
                                        fill: false,
                                        lineWidth: 3
                                    },
                                    points: {
                                        show: false,
                                        radius: 3,
                                        fill: true
                                    },
                                    curvedLines: {
                                        apply: false,
                                    }
                                }], {
                                    series: {
                                        label: "",
                                        curvedLines: {
                                            active: true,
                                            nrSplinePoints: 0
                                        },
                                    },
                                    tooltip: {
                                        show: true,
                                        content: "x : %x | y : %y"
                                    },
                                    grid: {
                                        hoverable: true,
                                        borderWidth: 0,
                                        labelMargin: 0,
                                        axisMargin: 0,
                                        minBorderMargin: 0,
                                    },
                                    yaxis: {
                                        min: 0,
                                        max: 40,
                                        color: 'transparent',
                                        font: {
                                            size: 0,
                                        }
                                    },
                                    xaxis: {
                                        color: 'transparent',
                                        font: {
                                            size: 0,
                                        }
                                    }
                                });
                                $.plot($("#app-eth"), [{
                                    data: [
                                        [0, 27],
                                        [2, 10],
                                        [4, 20],
                                        [6, 15],
                                        [8, 27],
                                        [10, 20],
                                        [12, 20],
                                    ],
                                    color: "#FF4962",
                                    lines: {
                                        show: true,
                                        fill: false,
                                        lineWidth: 3
                                    },
                                    points: {
                                        show: false,
                                        radius: 3,
                                        fill: true
                                    },
                                    curvedLines: {
                                        apply: false,
                                    }
                                }], {
                                    series: {
                                        label: "",
                                        curvedLines: {
                                            active: true,
                                            nrSplinePoints: 0
                                        },
                                    },
                                    tooltip: {
                                        show: true,
                                        content: "x : %x | y : %y"
                                    },
                                    grid: {
                                        hoverable: true,
                                        borderWidth: 0,
                                        labelMargin: 0,
                                        axisMargin: 0,
                                        minBorderMargin: 0,
                                    },
                                    yaxis: {
                                        min: 0,
                                        max: 40,
                                        color: 'transparent',
                                        font: {
                                            size: 0,
                                        }
                                    },
                                    xaxis: {
                                        color: 'transparent',
                                        font: {
                                            size: 0,
                                        }
                                    }
                                });
                                $.plot($("#app-usd"), [{
                                    data: [
                                        [0, 10],
                                        [2, 27],
                                        [4, 18],
                                        [6, 25],
                                        [8, 15],
                                        [10, 25],
                                        [12, 20],
                                    ],
                                    color: "#8C9CD4",
                                    lines: {
                                        show: true,
                                        fill: false,
                                        lineWidth: 3
                                    },
                                    points: {
                                        show: false,
                                        radius: 3,
                                        fill: true
                                    },
                                    curvedLines: {
                                        apply: false,
                                    }
                                }], {
                                    series: {
                                        label: "",
                                        curvedLines: {
                                            active: true,
                                            nrSplinePoints: 0
                                        },
                                    },
                                    tooltip: {
                                        show: true,
                                        content: "x : %x | y : %y"
                                    },
                                    grid: {
                                        hoverable: true,
                                        borderWidth: 0,
                                        labelMargin: 0,
                                        axisMargin: 0,
                                        minBorderMargin: 0,
                                    },
                                    yaxis: {
                                        min: 0,
                                        max: 40,
                                        color: 'transparent',
                                        font: {
                                            size: 0,
                                        }
                                    },
                                    xaxis: {
                                        color: 'transparent',
                                        font: {
                                            size: 0,
                                        }
                                    }
                                });
                                $.plot($("#app-btc"), [{
                                    data: [
                                        [0, 10],
                                        [2, 27],
                                        [4, 10],
                                        [6, 10],
                                        [8, 27],
                                        [10, 20],
                                        [12, 20],
                                    ],
                                    color: "#1DE3BE",
                                    lines: {
                                        show: true,
                                        fill: false,
                                        lineWidth: 3
                                    },
                                    points: {
                                        show: false,
                                        radius: 3,
                                        fill: true
                                    },
                                    curvedLines: {
                                        apply: false,
                                    }
                                }], {
                                    series: {
                                        label: "",
                                        curvedLines: {
                                            active: true,
                                            nrSplinePoints: 0
                                        },
                                    },
                                    tooltip: {
                                        show: true,
                                        content: "x : %x | y : %y"
                                    },
                                    grid: {
                                        hoverable: true,
                                        borderWidth: 0,
                                        labelMargin: 0,
                                        axisMargin: 0,
                                        minBorderMargin: 0,
                                    },
                                    yaxis: {
                                        min: 0,
                                        max: 40,
                                        color: 'transparent',
                                        font: {
                                            size: 0,
                                        }
                                    },
                                    xaxis: {
                                        color: 'transparent',
                                        font: {
                                            size: 0,
                                        }
                                    }
                                });
                            });
                        </script>
                    </div>
                </div>
                <div class="col-xl-4 col-md-12 datta-example">
                    <div class="card">
                        <div class="card-block">
                            <div class="row">
                                <div class="col-6">
                                    <h5>2,456</h5>
                                    <h6>Total Sales</h6>
                                    <div id="user-sale" style="height:50px;width:100px;"></div>
                                    <h6 class="mt-2 mb-0">2567<span class="m-r-10 m-l-10">Today</span></h6>
                                </div>
                                <div class="col-6">
                                    <h5>4,679</h5>
                                    <h6>Total User</h6>
                                    <div id="user-total" style="height:50px;width:100px;"></div>
                                    <h6 class="mt-2 mb-0">7896<span class="m-r-10 m-l-10">Today</span></h6>
                                </div>
                            </div>
                        </div>
                        <script type="text/javascript">
                            $(document).ready(function() {
                                floatchart()
                                $(window).on('resize', function() {
                                    floatchart();
                                });
                                $('#mobile-collapse').on('click', function() {
                                    setTimeout(function() {
                                        floatchart();
                                    }, 700);
                                });
                            });

                            function floatchart() {
                                $(function() {
                                    // [ flot options ]
                                    $.plot($("#user-sale"), [{
                                        data: [
                                            [0, 10],
                                            [3, 80],
                                            [6, 30],
                                            [9, 70],
                                            [12, 20],
                                            [15, 85],
                                            [18, 70],
                                        ],
                                        color: "#1DE3BE",
                                        lines: {
                                            show: true,
                                            fill: false,
                                            lineWidth: 3
                                        },
                                        points: {
                                            show: false,
                                            radius: 3,
                                            fill: true
                                        },
                                        curvedLines: {
                                            apply: true,
                                        }
                                    }], {
                                        series: {
                                            label: "",
                                            curvedLines: {
                                                active: true,
                                            },
                                        },
                                        tooltip: {
                                            show: true,
                                            content: "x : %x | y : %y"
                                        },
                                        grid: {
                                            hoverable: true,
                                            borderWidth: 0,
                                            labelMargin: 0,
                                            axisMargin: 0,
                                            minBorderMargin: 0,
                                        },
                                        yaxis: {
                                            min: 0,
                                            max: 90,
                                            color: 'transparent',
                                            font: {
                                                size: 0,
                                            }
                                        },
                                        xaxis: {
                                            color: 'transparent',
                                            font: {
                                                size: 0,
                                            }
                                        }
                                    });
                                    $.plot($("#user-total"), [{
                                        data: [
                                            [0, 10],
                                            [3, 80],
                                            [6, 10],
                                            [9, 70],
                                            [12, 10],
                                            [15, 60],
                                            [18, 10],
                                        ],
                                        color: "#1DE3BE",
                                        lines: {
                                            show: true,
                                            fill: false,
                                            lineWidth: 3
                                        },
                                        points: {
                                            show: false,
                                            radius: 3,
                                            fill: true
                                        },
                                        curvedLines: {
                                            apply: true,
                                        }
                                    }], {
                                        series: {
                                            label: "",
                                            curvedLines: {
                                                active: true,
                                            },
                                        },
                                        tooltip: {
                                            show: true,
                                            content: "x : %x | y : %y"
                                        },
                                        grid: {
                                            hoverable: true,
                                            borderWidth: 0,
                                            labelMargin: 0,
                                            axisMargin: 0,
                                            minBorderMargin: 0,
                                        },
                                        yaxis: {
                                            min: 0,
                                            max: 90,
                                            color: 'transparent',
                                            font: {
                                                size: 0,
                                            }
                                        },
                                        xaxis: {
                                            color: 'transparent',
                                            font: {
                                                size: 0,
                                            }
                                        }
                                    });
                                });
                            }
                        </script>
                    </div>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Float chart Js --&gt;
                    &lt;script src="assets/plugins/flot/js/jquery.flot.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/flot/js/jquery.flot.categories.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/flot/js/curvedLines.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/flot/js/jquery.flot.tooltip.min.js"&gt;&lt;/script&gt;
                </code>
            </pre>
        </div>
    </div>


    <div class="datta-example-modal">
        <a href="javascript:void(0)" class="md-datta-example-modal-copy">
            <span class="feather icon-clipboard"></span>
        </a>
        <a href="javascript:void(0)" class="datta-example-modal-close">&times;</a>
        <div class="scroll-div">
            <div class="datta-example-modal-content"></div>
        </div>
    </div>

    <script src="assets/js/pcoded.min.js"></script>
    <script src="assets/js/uikit.min.js"></script>

    <script>
        $(function() {
            $('body').scrollspy({
                target: ".docs-sections-inner"
            });
            $(document).on('scroll', function() {
                var top = $(document).scrollTop();
                var left = $(document).scrollLeft();
                $('.docs-sections')[0].style.top = (top > 70 ? 0 : 70 - top) + 'px';
                $('.docs-sections')[0].style.left = (left * -1) + 'px';
            });
            $(document).ready(function() {
                var top = $(document).scrollTop();
                var left = $(document).scrollLeft();
                $('.docs-sections')[0].style.top = (top > 70 ? 0 : 70 - top) + 'px';
                $('.docs-sections')[0].style.left = (left * -1) + 'px';
            });

            $(".docs-sections-inner a").on('click', function(event) {
                if (this.hash !== "") {
                    event.preventDefault();
                    var hash = this.hash;
                    $('html, body').animate({
                        scrollTop: $(hash).offset().top
                    }, 1500, function() {
                        window.location.hash = hash;
                    });
                }
            });

        });
    </script>

</body>

</html>
